همه چیز در مورد کار با Webpack 4 برای مدیریت Module bundling - قسمت 1 - شروع کار با Webpack



visibility  
mode_comment   ۰

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

همونطور که میدونین Webpack یک module bundler هست و هدف اصلی اون اینه که فایلهای Javascript رو برای استفاده در مرورگر Bundle کنه یا بصورت یک بسته در بیاره. با این وجود با استفاده از Webpack میتونین تقریبا هر منبعی مثل CSS و Image و ... رو نیز مدیریت کرده و اونا رو فشرده کنید و یا Compile کنید و ...

Webpack به یکی از مهم‌ترین ابزارها برای توسعه وب مدرن تبدیل شده است. با استفاده از این ابزار قدرتمند میتونین تعداد Request یا درخواست‌های HTTP رو کاهش بدین و سرعت برنامه خودتون رو ارتقاء بدین. وب‌پک همچنین به شما اجازه میده که به راحتی از بسته‌های npm در پروژه خودتون استفاده کنید.

این مقاله برای افرادی که تازه میخوان کار با Webpack رو شروع کنند، خیلی مفید هست و تمام تنظیمات مقدماتی و نحوه استفاده از loader و plugin و ... آموزش داده میشه. همچنین برای افرادی که قبلا از Webpack استفاده کردند، اطلاعاتی قرار داده میشه که میتونه بهشون کمک کنه.

خب در ابتدا باید Nodejs بر روی سیستم شما نصب باشه. اگر Nodejs در سیستم شما وجود دارد، میتونین کار با Webpack رو شروع کنید.

راه‌اندازی Webpack

خب در ابتدا یک دایرکتوری در Desktop بنام webpack-demo به وجود میارم وارد اون میشم و در اون دستور npm init -y رو میزنم تا بدون پرسیدن سوال، فایل package.json ساخته بشه. حالا در command line دستور npm install --save-dev webpack webpack-cli رو اجرا میکنم، تا ابزارهای webpack و webpack-cli نصب بشن. بعد از همه این کارها محتویات فایل package.json بصورت زیر خواهد بود:

خب حالا ساختار پروژه رو بصورت زیر بسازید:

خب در فایل index.html کدهای ساده زیر رو قرار بدین:

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

محتویات فایل webpack.config.js:

با این تنظیمات webpack فایل مشخص شده در entry یا ورودی که همون index.js هست رو کامپایل میکنه و یک خروجی با نام bundle.js در دایرکتوری dist به وجود میاره. خب حالا برای اجرا کردن Webpack دستورات npm-scripts در package.json رو بصورت زیر تعریف میکنیم:

همونطور که میبینید در کدهای بالا همه محتویات package.json قرار داده نشده و فقط تفاوت‌ها یا diff رو قرار دادیم. در کنار خط‌هایی که - قرار داده شده یعنی این خط حذف میشه و اون خط‌هایی که + دارند، اضافه شده‌اند.با استفاده از دستور npm run develop میتونیم اولین bundle رو با استفاده از webpack به وجود بیاریم. خروجی این دستور بصورت زیر خواهد بود:

همونطور که میبینید فایل bundle.js با حجم 3.9 کیلوبایت ساخته میشه  و دایرکتوری dist قرار میگیره. حالا میتونین index.html رو در مرورگر باز کنید و خروجی رو ببینید. اگر همه چیز درست باشه، متن Hello webpack رو خواهید دید. همونطور که میبینید در تصویر بالا command line هنوز منتظر تغییرات فایل هست و دستور به پایان نرسیده است. این حالت به این دلیل هست که از --watch استفاده کردیم و webpack منتظر تغییرات فایل مورد نظر میمونه و هر بار تغییری در فایل entry به وجود بیارید و ذخیره کنید، مجددا کامپایل میشه و با رفرش کردن مرورگر، آخرین تغییرات رو خواهید دید.

فایل bundle.js رو باز کنید تا ببینید که Webpack چه خروجی رو در اختیارتون قرار داده است. در بالای این فایل کدهای راه‌اندازی خود Webpack قرار داده شده و تقریبا در اواخر این فایل، کدهایی که ما نوشتیم، وجود داره:

شاید متعجب شدید که چرا webpack این همه کد رو اضافه میکنه و با خودتون بگید که چه کاریه که از webpack استفاده کنم. ولی باید بدونین که با استفاده از این کدها، webpack قادر هست که کدهای مدرنی که شما با استفاده از ES module به وجود میارید رو در همه مرورگرها اجرا کنه و نگرانی بابت مرورگرهای مختلف نداشته باشید. همچنین وقتی در حالت production خروجی webpack رو ببینید، کدهای بالا فشرده شده و کامنتها و اطلاعاتی که نیاز نیستند، حذف خواهند شد.

برای خارج شدن از حالت watching میتونین کلیدهای ترکیبی ctrl + c رو استفاده کنید. حالا دستور npm run build رو اجرا میکنم، تا webpack در حالت production عمل بکنه. خروجی بصورت زیر میشه:

باید متوجه چند تغییر شده باشید. اول اینکه دیگه در حالت watching نیستیم و دستور به پایان رسیده است. مورد بعد سایز خروجی bundle.js هست که از 3.9 کیلوبایت به 1.01 کیلوبایت تبدیل شده است. حالا اگر یکبار دیگه به bundle.js نگاه بندازید، کدهای فشرده شده با خوانایی بسیار کم قرار دارند که با استفاده از ابزار UglifyJS فشرده شده‌اند. خروجی کد بالا در مرورگر دقیقا مانند قبل خواهد بود. پس بصورت خلاصه دو حالت وجود دارد:

  • --mode development : سرعت build شدن و Debug کردن در این حالت بهتر هست و باید در محیط Development از اون استفاده بشه.
  • --mode production : حجم اون کمتر هست و در زمان اجرا سریعتر خواهد بود و باید در محیط production از اون استفاده بشه.

کار با Modules

با استفاده از مبحث ماژولها که در Ecmascript معرفی شده است میتونین برنامه‌های بزرگ رو در فایلهای کوچکتری قرار داده و اونا رو راحتتر مدیریت کنید و هر فایل بصورت مستقل برای خودش کار میکنه. Webpack به خوبی میدونه که چطور باید با import و export سر و کله بزنه و اونا رو جوری کامپایل کنه که همه مرورگرها اون رو پشتیبانی بکنند.

حالا میخوایم یک مثال رو با هم بررسی کنیم. در ابتدا در دایرکتوری src یک فایل بنام people.js به وجود میارم و کدهای زیر رو در اون قرار میدم:

همونطور که میبینید یک آرایه از اشیاء رو به وجود آوردیم و با استفاده از export اونا رو استخراج کردیم تا دیگر ماژولها بتونن از این آرایه استفاده بکنند.

حالا ماژول lodash-es رو در پروژه خودمون نصب میکنیم. lodash-es همون پروژه lodash هست با این تفاوت که از قواعد import و export مربوط به ES6 در اون استفاده شده است. برای اینکار دستور npm i --save lodash-es رو در command line اجرا میکنم. حالا کدهای زیر رو در index.js قرار میدم:

در اینجا ما آرایه مورد نظر رو بر اساس نام مدیر گروه‌بندی کردیم و اگر npm run develop رو اجرا کنید و فایل index.html رو در مرورگر باز کنید، خروجی گروه‌بندی شده رو خواهید دید. زمانی که npm run develop رو اجرا میکنیم، خروجی بصورت زیر میشه:

میبینید که حجم فایل خروجی 1.41 مگابایت شده است! اگر در انتها نگاه کنید، خواهید دید که 638 ماژول مخفی هم توسط webpack باندل شدند. این نتیجه‌ای که میبینید خیلی خوشایند نیست و ما فقط ماژول groupBy مربوط به lodash رو میخواستیم، ولی همه ماژولهای مربوط به lodash در خروجی قرار داده شدند و حجم فایل رو بالا بردند.

حالا اگر npm run build رو اجرا کنید، همه ماژولهای اضافی حذف میشه و فقط اون ماژولهایی که در پروژه از اونا استفاده شده است، مورد استفاده قرار میگیره.

فرآیندی که در اون ماژولهای اضافی حذف میشن رو Tree shaking میگن و این کار رایگان و اتوماتیک توسط Webpack انجام میشه. اگر دستور npm run build رو اجرا کنیم، خروجی بصورت زیر خواهد بود:

میبینید که این بار حجم فایل خروجی فقط 17 کیلوبایت شده است و فقط همون ماژولهایی که مورد نیاز بودند در bundle.js قرار گرفتند. اگر خروجی رو در مرورگر ببینید، همانند قبل خواهد بود.

در جلسه بعد با ادامه مبحث شیرین Webpack در خدمتتون هستم.

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
7Learn Experts
comment دیدگاه کاربران

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

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