ابزارهای Build به عضوی جدایی‌ناپذیر از توسعه‌ی وب تبدیل شده‌اند، مخصوصا که هر روز برنامه‌ها و ابزارهای پیچیده‌تری با جاوااسکریپت توسعه داده می‌شود. Bundler ها به ما امکان می‌دهند که کتابخانه‌ها و خیلی نیازمندی‌های دیگری که در یک پروژه‌ی مدرن وب نیاز داریم را بسته‌بندی، کامپایل و سازماندهی کنیم.

یک JavaScript bundler ابزاری‌ست که کد شما و تمام وابستگی (dependencies) های آن را در یک فایل جاوااسکریپت قرار می‌دهد. امروزه تعداد زیادی از آنها وجود دارند که webpack و browserify در میان آنها محبوبیت زیادی دارند.

در این مطلب می‌خواهیم نگاهی به webpack داشته باشیم؛ یک bundler و پیش‌پردازشگر متن باز (open-source) قدرتمند که حجم گسترده‌ای از کارهای مختلف را می‌تواند کنترل و اداره کند. نشان می‌دهیم که چگونه ماژول‌ها و باندل کد بنویسید و از برخی از پلاگین‌های بارگذار (loader plugins) استفاده کنید. این آموزش برای افرادی طراحی شده است که تازه می‌خواهند با webpack آشنا شوند، اما خوب است که با جاوااسکریپت آشنا باشید.

چرا Webpack؟

همچون بسیاری دیگر از جنبه‌های توسعه‌ی وب، استانداردی وجود ندارد که از کدام یک از ابزارهای Build استفاده کنیم. همین حالا، توسعه دهندگان می‌توانند از بین webpack، Gulp، Browserify، NPM scripts، Grunt و ده تای دیگر، یکی را انتخاب کنند. هر چند که مقایسه‌های عمیقی بین آنها وجود دارد، اما همه‌ی این ابزارها خیلی به هم شبیه هستند. بنابراین در بسیاری از موارد، ترجیح شخصی و پروژه‌ای که روی آن کار می‌کنید در انتخاب ابزار تاثیرگذار خواهد بود.

برخی از مزایا و معایبی که به شما کمک می‌کند تصمیم بگیرید که webpack برای شما مناسب است یا نه، عبارتند از:

مزایا:

• برای کار با برنامه‌های تک صفحه‌ای (single-page) عالی است
• هم می‌توانید از import و هم از ()require استفاده نمایید
• امکان استفاده از code splitting بسیار پیشرفته
• Hot Reload برای توسعه‌ی سریعتر با React, Vue.js و بسترهای کاری (frameworks) مشابه
• عمومی ترین ابزار Build بر اساس ۲۰۱۶ JavaScript survey

معایب:

• برای افرادی که تازه می‌خواهند توسعه وب را آغاز کنند مناسب نیست
• کار با فایل‌های CSS و تصاویر و سایر فایل‌های غیر از جاوااسکریپت در ابتدا کمی گیج کننده است
• مستندات می‌توانستند کمی بهتر باشند
• تغییرات زیادی دارد، حتی بسیاری از آموزش‌هایی که در سال ۲۰۱۶ تولید شده‌اند، در حال حاضر کاربرد ندارند

---

۱ نصب و راه‌اندازی

آسان ترین راه برای نصب webpack استفاده از یک package manager است. ما از npm استفاده می کنیم اما شما می‌توانید از Yarn و یا هر جایگزین دیگری که دوست دارید استفاده کنید. در هر صورت شما باید Node.js را روی دستگاه خود داشته باشید و فایل package.json آماده باشد.

بهتر است که به صورت locally نصب شود (بدون استفاده از g-). به این ترتیب مطمئن هستیم که هر کسی که روی پروژه شما کار می‌کند، همان نسخه از webpack را خواهد داشت.

npm install webpack --save-dev

هنگامی که نصب انجام شد، بهترین کار اجرای webpack از طریق یک اسکریپت Node.js است. خطوط زیر را به فایل package.json اضافه نمایید:

//...
"scripts": {
    "build": "webpack -p",
    "watch": "webpack --watch"
},
//...

حالا با صدا زدن دستور npm run build در ترمینال، می‌توانید فایل‌های webpack bundle خود را بسازید. (گزینه‌ی p- برای حالت محصول نهایی به کار می‌رود و کد باندل شده را minify می‌کند). اجرای دستور npm run watch پردازشی را فعال می‌کند که به صورت خودکار، به ازای هر تغییر، فایلهای شما را bundle می‌کند.

آخرین مرحله از راه‌اندازی اولیه این است که مشخص کنید کدام فایل‌ها را می‌خواهید بسته‌بندی کنید. روش توصیه شده برای اینکار استفاده از یک فایل پیکربندی است.

---

۲ فایل پیکربندی Webpack

در اینجا نگاهی به فایل پیکربندی در ساده‌ترین شکل آن می‌کنیم، اما دچار اشتباه نشوید – فایل پیکربندی webpack بسیار قدرتمند است، از پروژه‌ای به پروژه دیگر متفاوت است و در برخی موارد می‌تواند بسیار پیچیده باشد.

در پوشه‌ی اصلی پروژه‌ی خود یک فایل به نام webpack.config.js ایجاد کنید:

webpack.config.js

var path = require('path');

module.exports = {
    entry: './assets/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

گزینه entry فایل جاوااسکریپت اصلی را به webpack معرفی می‌کند. استراتژی‌های متفاوت زیادی برای پیکربندی نقاط ورود (entry points) وجود دارد اما در بسیاری از موارد یک entry کافیست.

در output، نام و مسیر بسته را مشخص می‌کنیم. بعد از اجرای webpack، تمام فایل‌های جاوااسکریپت ما در یک فایل به نام bundle.js قرار می‌گیرند. این تنها فایل جاوااسکریپتی است که در HTML خودمان به آن لینک خواهیم داد:

<script src="./dist/bundle.js"></script>

همین میزان تنظیمات برای شروع کار کافیست. بعدتر چیزهای بیشتری اضافه می‌کنیم، اما حالا اجازه دهید ببینیم که ماژول‌ها چگونه کار می‌کنند.

---

۳ ماژول‌های Webpack

راه‌های زیادی برای کار با ماژول‌ها توسط webpack فراهم شده است، و در بسیاری از مواقع، شما حق دارید که هر کدام را دوست داشتید انتخاب نمایید. در این آموزش ما از دستور import موجود در ES6 استفاده می‌کنیم.

می‌خواهیم یک ماژول اضافه کنیم که با کاربرانمان حال و احوال کنیم. یک فایل به نام greeter.js ایجاد می‌کنیم و یک تابع ساده درون آن می‌نویسیم:

greeter.js

function greet() {
    console.log('Have a great day!');
};

export default greet;

برای استفاده از این ماژول، باید آن را در نقطه ورود (entry point) که در فایل پیکربندی با نام index.js تعریف کرده بودیم، import کنیم.

index.js

import greet from './greeter.js';

console.log("I'm the entry point");
greet();

حالا چنانچه ما دستور  npm run build را در ترمینال اجرا کنیم، و فایل HTML خود را در مرورگر باز کنیم، در کنسول چیزی شبیه تصویر زیر می‌بینیم:

نقطه ورود ما و ماژول greeter ما درون فایلی به نام bundle.js قرار گرفته‌اند و این فایل توسط مرورگر اجرا شد. در شکل زیر، آنچه اتفاق افتاد را به صورت flow chart مشاهده می‌کنید:

---

۴ استفاده از کتابخانه‌ها (Libraries)

می‌خواهیم برنامه‌ی ما همراه با حال و احوال کردن با کاربران، روز هفته را نیز مشخص کند. برای این منظور می‌خواهیم از moment.js استفاده کنیم و این کتابخانه را به صورت مستقیم در ماژول خود import کنیم.

ابتدا باید کتابخانه را با استفاده از npm نصب کنیم:

npm install moment --save

سپس در ماژول greeting خودمان، به سادگی کتابخانه را import می‌کنیم، دقیقا به همان صورتی که در مرحله‌ی قبل یک ماژول محلی (local) را import کرده بودیم:

greeter.js

import moment from 'moment';

function greet() {
    var day = moment().format('dddd');
    console.log('Have a great ' + day + '!');
};
export default greet;

بعد از اینکه مجددا تغییرات را bundle کردیم، در کنسول مرورگر پیغامی شبیه به شکل زیر خواهیم دید:

حالا نمای جریانی که اتفاق افتاد به صورت زیر می‌شود:

توجه: تکنیک‌های دیگر و پیشرفته‌تری برای استفاده از کتابخانه‌ها وجود دارد که خارج از حوزه و حوصله‌ی این آموزش است. می‌توانید برای مطالعه‌ی بیشتر به اینجا مراجعه کنید.

---

۵ بارکننده‌ها (Loaders)

بارکننده‌ها راهکاری هستند که webpack برای اجرای وظایف در طول بسته‌بندی و پیش پردازش یا پس پردازش فایل‌ها، ارائه می‌کند. به عنوان مثال، آنها TypeScript را کامپایل می‌کنند، کامپوننت‌های Vue.js را بارگذاری می‌کنند، قالب‌ها را ترجمه (render) می‌کنند و خیلی کارهای دیگر. بارکننده‌های زیادی توسط عموم کاربران (community) نوشته شده‌اند که در اینجا می‌توانید لیستی از عمومی‌ترین آنها را مشاهده نمایید.

فرض کنید که می‌خواهیم یک linter به پروژه خود اضافه کنیم تا کدهای JS را برای پیدا کردن خطاها، بررسی نماید. می‌توانیم اینکار را با استفاده از JSHint loader انجام دهیم. در اینصورت متوجه هر نوع bad practice و code smell در کدهای خود خواهیم شد.

ابتدا باید JSHint و بارکننده‌ی آن برای webpack را نصب کنیم:

npm install jshint jshint-loader --save-dev

حال باید خطوط کمی را به فایل پیکربندی webpack اضافه کنیم. در این خطوط، بارکننده را مقداردهی اولیه می‌کنیم، مشخص می‌کنیم که کدام فایل‌ها باید بررسی شوند و کدام فایل‌ها نادیده گرفته شوند.

webpack.config.js

var path = require('path');

module.exports = {
    entry: './assets/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    // Add the JSHint loader
    module: {
        rules: [{
            test: /\.js$/, // Run the loader on all .js files
            exclude: /node_modules/, // ignore all files in the node_modules folder
            use: 'jshint-loader'
        }]
    }
};

حالا وقتیکه webpack شروع به کار می‌کند، لیستی از هشدارها در ترمینال نمایش داده می‌شود (که ما آنها را نادیده گرفتیم):

از آنجایی که فایل moment.js در پوشه‌ی node_modules قرار گرفته است، توسط JSHint بررسی نمی‌شود:

جهت مطالعه بیشتر

این مقدمه‌ای برای معرفی webpack بود! از آنجا که این آموزش برای افراد مبتدی نوشته شده است، سعی شد که تنها مباحث بیشتر کاربردی و مفاهیمی که دانستن آنها الزامی است پوشش داده شوند. امیدوارم که این آموزش مفید بوده باشد، گیج کننده نباشد و همانطور که در عنوان مطلب گفته شده است، بیشتر از پانزده دقیقه زمان نبرده باشد.

به هر حال، اگر می‌خواهید چیزهای بیشتری در مورد webpack یاد بگیرید، توصیه می‌کنم منابع فوق‌العاده‌ی زیر را حتما بررسی کنید:

• webpack.js.org سایت رسمی پروژه، که مستندات و راهنماهای زیادی را می‌توانید در آن پیدا کنید.
• Awesome webpack لیستی از منابع webpack
• Webpack 2 – A full tutorial دو ساعت ویدئوی آموزشی رایگان
• Webpack Examples لیستی از پیکربندی‌های متنوع برای webpack

منبع: Learn Webpack in 15 Minutes
ترجمه: سیدمحمدحسین طباطبایی بالا