campaign-experts

همه چیز در مورد کار با Webpack 4 برای مدیریت Module bundling - قسمت آخر - کار با Plugin های Webpack



visibility  
mode_comment   ۰

در این قسمت میخوام مطلب همه چیز در مورد کار با Webpack 4 رو ادامه بدم و اطلاعات بیشتری رو در مورد Module bundling در اختیارتون قرار بدم.

در قسمت قبل بصورت خلاصه در مورد پلاگین‌ها توضیحاتی رو دادم و تنظیمات مربوط به Production و Development مربوط به Webpack رو از هم جدا کردیم تا بتونیم در هر محیط، Plugin های متنوع و مخصوص به خودش رو نصب کرده و بصورت بهینه از اونا استفاده کنیم.

کار با پلاگین‌ها در محیط Production

جدا کردن CSS

یک Best practice برای محیط Production اینه که کدهای CSS رو از کدهای Javascript جدا کنید و در یک Bundle دیگه قرار بدین تا حجم Bundle اصلی کاهش پیدا کنه و این دو Bundle در کنار یکدیگر دانلود بشوند. برای اینکار از پلاگین ExtractTextWebpackPlugin استفاده میکنیم.

اگر یادتون باشه در فایل webpack.common.js یک لودر برای فایلهای scss قرار دادیم و این لودر برای محیط development به خوبی عمل میکنه. پس این لودر رو به فایل webpack.dev.js انتقال میدیم و از ExtractTextWebpackPlugin فقط برای محیط Production استفاده میکنیم.

در ابتدا باید ابزار ExtractTextWebpackPlugin رو نصب کنیم:

فایل webpack.common.js بصورت زیر تغییر میکنه:

فایل webpack.dev.js بصورت زیر تغییر میکنه:

فایل webpack.prod.js نیز بصورت زیر تغییر میکنه:

حالا میخوایم خروجی هر 2 حالت رو با هم مقایسه کنیم. در ابتدا در حالت Development بصورت زیر هست:

در حالت Production نیز بصورت زیر میشه:

حالا که در production کدهای CSS رو از bundle کلی جدا کردیم، باید در فایل index.html به این فایل css یک لینک بدیم. بصورت زیر:

با اینکار به مرورگر این قابلیت رو میدیم که فایل CSS و Javascript رو بصورت موازی در کنار یکدیگر دانلود کنه و سرعت سایت از قبل بیشتر میشه. با اینکار اگر لود شدن Javascript هم طول بکشه، کدهای CSS در مرورگر اعمال میشن و کاربر میتونه چیزی رو در صفحه مشاهده کنه.

مدیریت و تولید HTML

هر زمان که خروجی‌ها تغییر پیدا میکنه، ما باید کدهای درون index.html رو تغییر بدیم تا به فایلهای جدید reference بده. یک پلاگین بنام html-webpack-plugin وجود داره که این کار رو بصورت اتوماتیک برای ما انجام میده.

همچنین میتونیم یک پلاگین دیگه بنام clean-webpack-plugin رو اضافه کنیم تا قبل از هر build شدن، کل فایلهای درون دایرکتوری dist رو پاک کنه و فایلهای جدید رو جایگزین اونا کنه. برای نصب این 2 پلاگین بصورت زیر عمل میکنیم:

حالا فایل webpack.common.js رو بصورت زیر تغییر میدیم:

به این دلیل کدهای بالا رو درون webpack.common.js قرار دادیم چون میخواستیم اون 2 پلاگین هم در production و هم در development مورد استفاده قرار بگیرن. حالا هر بار که npm run build یا npm run develop رو اجرا کنیم، دایرکتوری dist پاک میشه و مجددا با فایلهای جدید قرار میگیره و همچنین فایل index.html هم بصورت اتوماتیک تغییر پیدا میکنه و به فایلهای مورد نظر لینک میشه.

کار با پلاگین‌ها در محیط Development

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

شما میتونین در محیط Development از قدرت webpack-dev-server استفاده کنید که یک سرور ساده رو برای شما به وجود میاره و قابلیت live-reloading رو در اختیارتون قرار میده و دیگه نیاز نیس که با اعمال تغییرات، مرورگر رو رفرش کنید و این کار بصورت اتوماتیک انجام میشه. برای نصب این ابزار بصورت زیر عمل میکنیم:

حالا فایل package.json رو بصورت زیر تغییر میدیم:

میبینید که به جای webpack از webpack-dev-server استفاده کردیم. حالا اگر دستور npm run build رو مجددا اجرا کنیم، خروجی بصورت زیر خواهد بود:

حالا آدرس http://localhost:8080/ رو در مرورگر باز کنید و یک تغییر رو در کدهای Javascript یا CSS به وجود بیارید. همونطور که خواهید دید webpack دوباره bundle خروجی رو میسازه و مرورگر نیز بصورت اتوماتیک رفرش میشه و آخرین تغییرات رو نمایش میده.

HotModuleReplacement

پلاگین HotModuleReplacement یک قدم فراتر از love reloading جلو رفته و در زمان اجرای برنامه ماژولهایی که تغییر کردند رو بدون رفرش شدن کل صفحه جایگزین میکنه و خروجی رو نمایش میده. اگر به درستی از این ابزار استفاده کنید مدت زمان زیادی در زمان توسعه و Development رو مخصوصا در Single page application ها برای شما ذخیره میکنه و نیاز نیست که با هر تغییر کوچک منتظر بمونین تا کل پروژه دوباره build بشه و بتونین تغییرات اون رو مشاهده کنید.

با اینکار همه حالات و state هایی که در مرورگر ایجاد کردید سر جاش باقی میمونه و فقط اون چیزایی که تغییر پیدا کرده، بروز رسانی میشه و میتونیم خروجی رو فورا در مرورگر مشاهده کنیم.

برای اینکار فایل webpack.dev.js رو بصورت زیر تغییر میدیم:

فایل index.js رو نیز بصورت زیر تغییر میدیم:

با اینکار ویژگی hot-module-replacement رو قبول میکنیم و بهش اجازه میدیم. مجددا دستور npm run develop رو اجرا کنید و کارهای زیر رو انجام بدین:

  • بر روی Open chat کلیک کنید
  • حالا یک آیتم به فایل people.js اضافه کنید
  • مجددا بر روی Open chat کلیک کنید

خروجی بصورت زیر میشه:

این کارها در پس زمینه انجام میشه:

  1. زمانی که بر روی Open chat کلیک میشه، ماژول chat دریافت و initialize میشه
  2. HotModuleReplacement یا HMR متوجه تغییرات در ماژول people.js میشه
  3. module.hot.accept اجازه میده که این تغییرات در خروجی مورد استفاده قرار بگیره
  4. زمانی که Open chat مجددا کلیک میشه، کدهای مربوط به ماژول update شده رو اجرا میکنه و باعث میشه که عدد 4 رو نمایش بده.

CSS Replacement

حالا میخوام رنگ دکمه در کدهای scss رو تغییر بدم و ببینم که چه اتفاقی میوفته. برای اینکار بصورت زیر عمل میکنم:

با ذخیره کردن این تغییرات بدون اینکه صفحه رفرش بشه و وضعیت محتوای درون مرورگر تغییر پیدا کنه، رنگ دکمه‌ها قرمز میشن:

Hot module replacement یکی از پیشرفته‌ترین و مدرن‌ترین روشها برای تست کردن برنامه‌ها در محیط Development می‌باشد و بهتره که شما نیز در پروژه‌هاتون از اون استفاده کنید.

نتیجه‌گیری

سعی شد در این 4 قسمت توضیحات مقدماتی در مورد همه جنبه‌های Webpack در اختیارتون قرار بگیره تا با قدرت این ابزار آشنا بشید و اگر تا حالا کار با اون رو شروع نکردید، بتونین از اون استفاده کنید. شاید مدت زمانی طول بکشه تا کار با Webpack و تنظیمات اون رو به خوبی یاد بگیرید ولی ارزش یادگیری داره و خیلی بهتون کمک خواهد کرد.

شما میتونین برای مطاالعه بیشتر مستندات Webpack رو مطالعه کنید.

comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :