تا %60 تخفیف خرید برای 5 نفر با صدور مدرک فقط تا
00 00 00

آموزش Webpack قسمت 10: کار با پوشه ها

حسین احمدی
حسین احمدی
0 پسند
73 بازدید
0 نظر
3 ماه قبل

ضمیمه ها

WebpackSample.rar

در ادامه مباحث آموزش Webpack در مورر کار با پوشه ها صحبت می کنیم. یکی از مشکلات پروژه ای که تا الان باهاش کار کردیم، نحوه قرار گرفتن فایل ها داخل پوشه src هست که تمامی فایل های تصویر، جاوا اسکریپت، استایل ها و ... همگی داخل یک پوشه قرار گرفتن. برای رفع این مشکل ساختار پوشه src رو به صورت زیر تغییر می کنیم:

src
 images
  flowers.jpg
 scripts
  admin.js
  greeting.js
  index.js
 styles
  application.scss
  styles.css
 template.html

قدم بعدی، تغییر بخش entry در فایل webpack.config.js هست تا مسیر فایل های javascript بر اساس ساختار پوشه بندی جدید مشخص بشن:

entry: {
 application: "./src/scripts/index.js",
 admin: "./src/scripts/admin.js"
},

دستور npm run build رو اجرا می کنیم و با پیام زیر روبرو میشیم:

ERROR in ./src/scripts/index.js
Module not found: Error: Can't resolve './application.scss' in 'D:\WebpackSample\src\scripts'
 @ ./src/scripts/index.js 1:0-45

ERROR in ./src/scripts/admin.js
Module not found: Error: Can't resolve './styles.css' in 'D:\WebpackSample\src\scripts'
 @ ./src/scripts/admin.js 1:0-34

دلیل این خطا بخش import فایل های css و scss در فایل های اسکریپت هست. ما باید مسیر فایل های css و scss داخل فایل های جاوا اسکریپت و مسیر فایل تصویر در فایل scss رو تغییر بدیم:

فایل index.js:

import application from '../styles/application.scss';

فایل admin.js:

import styles from '../styles/styles.css';

و فایل application.scss:

body{
 background-image: url('../images/flowers.jpg');
 background-size: cover;
}

دستور npm run build رو مجدد اجرا می کنیم و این بار بدون مشکل عملیات build انجام می شود.

موضوع بعدی استفاده از Alias ها است. فرض کنید تعداد پوشه هایی که ایجاد میشه زیاد هست و ما چندین Level پوشه داریم و ممکن هست که نوشتن آدرس ها به صورت زیر هم بشه:

import application from "../../../styles/application.scss"

نوشتن آدرس به این صورت زاد جالب نیست و برای رفع این مشکل میتونیم از Alias ها استفاده کنیم. برای اینکار داخل فایل webpack.config.js بخشی به نام resolve به صورت زیر تعریف می کنیم:

devtool: "cheap-module-eval-source-map",
resolve: {
 alias: {
  CssFolder: path.resolve(__dirname, 'src/styles/')
 }
},

قدم بعدی به روز رسانی فایل های اسکریپت و استایل به صورت زیر هست:

فایل index.js:

import application from 'CssFolder/application.scss';

و فایل admin.js:

import application from 'CssFolder/application.scss';

دستور npm run build رو اجرا می کنیم و میبینیم که عملیات build بدون مشکل انجام میشه.
موضوع بعدی resolve کردن لایبری ها از پوشه node_modules هست. برای مثال ما jquery رو بوسیله دستور زیر نصب می کنیم:

npm install jquery

و داخل فایل index.html دستور زیر رو می نویسیم:

import $ from 'jquery';

و در انتهاب فایل index.js دستور زیر رو اضافه می کنیم:

$('body').append('<p>This line is appended with jQuery!</p>')

و در نهایت اجرای دستور npm run build عملیات build رو انجام میدیم، اگر صفحه index.html رو باز کنیم میبینیم که متن به صفحه اضافه شده. نکته ای که اینجا وجود داره jquery به دلیل نصب توسط npm از داخل پوشه node_modules خونده میشه، اما اگر ما یک کتابخانه رو به صورت دستی دانلود کرده باشیم و به پروژه اضافه کنیم چطور؟ برای مثال، پوشه ای با نام mylibs به پوشه src اضافه کرده و فایل jquery.js رو داخلش کپی میکنیم و jquery رو بوسیله npm uninstall jquery حذف می کنیم. اگر دستور npm run build رو اجرا کنیم با پیام خطای زیر مواجعه میشیم:

ERROR in ./src/scripts/index.js
Module not found: Error: Can't resolve 'jquery' in 'D:\WebpackSample\src\scripts'
 @ ./src/scripts/index.js 3:0-23 5:0-1

برای رفع این مشکل، باید به webpack بگیم که علاوه بر پوشه node_modules، پوشه mylibs رو هم برای resolve کردن dependency ها در نظر بگیره. بخش resolve از فایل webpack.config.js رو به صورت زیر تغییر میدیم:

resolve: {
 alias: {
  CssFolder: path.resolve(__dirname, 'src/styles/')
 },
 modules: [path.resolve(__dirname,'src/mylibs'),'node_modules']
},

مجدد دستور npm run build رو اجرا می کنیم و این بار عملیات build بدون هیچگونه خطایی اجرا میشه.

البته این نکته رو مد نظر داشته باشید که استفاده از npm برای نصب لایبری ها توصیه میشه و نکته گفته شده تنها برای این بود که بدونید چطور تحت شرایط خاص بتونید مسیر برای resolve کردن dependency ها رو مشخص کنید.
نکته دیگه شاید در زمان build پیام هشدار مشابه پیام زیر دریافت کنید:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  application-72bab53070a81fc4cd42.js (808 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (808 KiB)
      application-a6f39414f54ee74e901e.css
      application-72bab53070a81fc4cd42.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

دلیل این پیام این هست که حجم فایل application.js از حجم 244 کیلوبایت بیشتر شده (به دلیل include کردن jquery) که در بخش های بعدی در مورد برطرف کردن این مشکل صحبت می کنیم.

کدهای این قسمت به صورت ضمیمه از ابتدای این مطلب قابل دریافت هست. قبل از استفاده از کدها دستور npm install رو برای resolve کردن dependency ها اجرا کنید.

نویسنده: حسین احمدی
منبع: جزیره طراحی و توسعه وب توسینسو
هر گونه نشر و کپی برداری با ذکر نام منبع و نویسنده بلامانع است

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...