Webpack — این چیست، معماری و اصل کار

Webpack چیست؟

Webpack — یک باندلر ماژول است که وابستگی‌های برنامه را تجزیه و تحلیل می‌کند و آن‌ها را به فایل‌های استاتیک برای مرورگر یا سرور بسته‌بندی می‌کند. ایجاد شده توسط توبیاس کوپرس در سال 2012، Webpack به سرعت به استاندارد بیلد بدل شد چرا که مفهوم همه فایل‌ها ماژول هستند را طرح کرد: JavaScript، CSS، تصاویر، فونت‌ها و حتی HTML توسط یک سیستم واحد loader پردازش می‌شوند.

چرا Webpack به استاندارد صنعت تبدیل شد

Webpack ایده‌ای انقلابی برای زمان خود ارائه داد: loaderها امکان متصل شدن هر نوع منبعی را از طریق import یا require فراهم می‌کنند. این توانایی توسعه‌دهندگان را از نیاز به ابزارهای جداگانه برای پیش‌پردازنده‌های CSS (SCSS)، کامپایلرهای TypeScript و بهینه‌سازهای تصاویر بی‌نیاز کرد. تا سال 2020، بیش از 80% پروژه‌های JavaScript از Webpack استفاده می‌کردند (داده‌های npm stat: 2019–2024).

رقباء — Vite، Parcel و Turbopack — سرعت توسعه بالاتری را ارائه می‌دهند، اما Webpack به دلیل پایداری، اکوسیستم بالغ و سازگاری با عقب در بخش enterprise پیشرو باقی مانده است. مهاجرت از Webpack به Vite در پروژه‌های بزرگ هفته‌ها طول می‌کشد و اغلب به دلیل ناسازگاری پلاگین‌ها مسدود می‌شود.

Webpack چگونه کار می‌کند

Webpack از نقطه ورود شروع کرده و گراف وابستگی می‌سازد. هر import یا require یافت شده به گراف اضافه می‌شود، از زنجیره loader گذشته و در چانک قرار می‌گیرد. خروجی نهایی به پیکربندی بستگی دارد: یک بندل، چند چانک یا خروجی کتابخانه‌ای در فرمت‌های UMD، CommonJS یا ES Module.

فرآیند بیلد Webpack

// پیکربندی حداقل Webpack 5
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5 یک کش داخلی مبتنی بر فایل سیستم معرفی کرد که بیلدهای تکراری را 2–5 برابر سریع‌تر می‌کند. Persistent caching نتایج تبدیل ماژول‌ها را بین اجراها ذخیره می‌کند که به‌ویژه در CI/CD مهم است. برای فعال‌سازی کافی است cache: { type: 'filesystem' } را به پیکربندی اضافه کنید.

مفاهیم کلیدی Webpack

Webpack با چهار مفهوم اساسی کار می‌کند: Entry (نقطه ورود)، Output (خروجی)، Loaders (تبدیل‌ها) و Plugins (افزونه‌ها). درک این مفاهیم برای پیکربندی هر نوع بیلدی از یک سایت ساده تا یک برنامه پیچیده enterprise ضروری است.

Entry، Output و حالت‌ها

Entry — یک ماسیو یا شیء که یک یا چند نقطه ورود را تعیین می‌کند. Multi-entry برای برنامه‌های چندمجزوئی استفاده می‌شود. Output — تنظیمات فایل‌های خروجی: مسیر، الگوی نام، URL عمومی. Mode — development، production یا none — به طور خودکار پلاگین‌های بهینه و مقادیر پیش‌فرض را برای هر حالت فعال می‌کند.

Content Hash — اضافه کردن هش محتوا به نام فایل ([contenthash]) کشینگ بلندمدت را تضمین می‌کند. مرورگر فایل جدید را تنها در صورت تغییر محتوایش بارگیری می‌کند. SplitChunksPlugin وابستگی‌های مشترک از Entryهای مختلف را به طور خودکار به چانک‌های جداگانه جدا می‌کند و از تکرار کد جلوگیری می‌کند.

Loaders و Plugins

Loaders فایل‌های منبع را قبل از افزودن به گراف وابستگی تبدیل می‌کنند. هر loader یک تابع است که محتوای فایل را می‌گیرد و یک ماژول JavaScript برمی‌گرداند. Plugins — افزونه‌های قدرتمندتری که به کل چرخه زندگی بیلد دسترسی دارند: از شروع تا تولید فایل‌های خروجی.

Loaderهای محبوب و کاربرد آن‌ها

Plugins، بر خلاف loaderها، می‌توانند در هر مرحله‌ای از بیلد اقدام کنند. HtmlWebpackPlugin به طور خودکار یک فایل HTML با اسکریپت‌های متصل تولید می‌کند. MiniCssExtractPlugin CSS را برای بارگیری موازی به فایل‌های جداگانه استخراج می‌کند. DefinePlugin امکان ارسال متغیرهای محیطی به کد برنامه در زمان بیلد را فراهم می‌کند.

بهینه‌سازی بیلد Webpack

Webpack مکانیسم‌های بهینه‌سازی داخلی را فراهم می‌کند: tree shaking، code splitting و فشردگی. Tree shaking خروجی‌های استفاده‌نشده از ماژول‌های ES را حذف می‌کند. Code splitting از طریق import() بندل را به چانک‌های دینامیک تقسیم می‌کند. Minimizer — TerserPlugin برای JS و CssMinimizerPlugin برای CSS.

تکنیک‌های پیشرفته بهینه‌سازی

// webpack.config.js — بهینه‌سازی بیلد تولید
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation — قدرتمندترین قابلیت Webpack 5 برای میکروفرونت‌اندها. آن امکان بارگیری ماژول‌ها از سایر بیلدهای مستقل در زمان اجرا را فراهم می‌کند. هر میکروبرنامه به صورت مستقل توسعه و مستقل منتشر می‌شود، اما برای کاربر در یک رابط واحد جمع می‌شوند. Segment Analytics از سال 2021 از Module Federation در تولید استفاده می‌کند و زمان استقرار را 80% کاهش داده است.

Webpack برای React Native و پروژه‌های وب

Webpack به ندرت مستقیماً در React Native استفاده می‌شود — برای این کار Metro وجود دارد. اما Webpack در پروژه‌های React Native Web کاربرد دارد آنجا که یک پایگاه کد واحد برای سطح موبایل (از طریق Metro) و وب (از طریق Webpack) ساخته می‌شود. Webpack همچنین در برنامه‌های ترکیبی در Ionic و Cordova محبوب است.

Webpack برای بیلد چندسطحی

در پروژه‌هایی که React Native Web برای رندر وب استفاده می‌شود، Webpack با الیاس‌هایی پیکربندی می‌شود که ماژول‌های طبیعی را با پیاده‌سازی‌های وب جایگزین می‌کنند. Alias react-native → react-native-web امکان استفاده از کامپوننت‌های مشترک را بدون تغییر ایمپورت‌ها فراهم می‌کند. DefinePlugin پرچم سطح را برای کامپایل شرطی کد مخصوص سطح انتقال می‌دهد.

بهینه‌سازی Webpack برای وب موبایل با دسکتاپ متفاوت است. Mobile-first بیلد شامل مینیفکاسیون شدید، lazy loading تصاویر و بارگیری اولویت CSS بحرانی است. CompressionPlugin با فشردگی brotli اندازه بندل را برای شبکه‌های موبایل 3G/4G به اندازه 20–25% کاهش می‌دهد. برای جداسازی پیکربندی‌ها برای سطوح مختلف از webpack-merge استفاده کنید: mobile-first و desktop-بهینه‌شده.

Webpack 5 Module Federation: میکروفرونت‌اندها

Module Federation — یک قابلیت انقلابی Webpack 5 است که امکان بارگیری ماژول‌های JavaScript از سایر بیلدهای مستقل را بدون انتشار در npm فراهم می‌کند. هر میکروبرنامه به صورت مستقل توسعه می‌یابد، پیکربندی Webpack خود را دارد و به صورت جداگانه منتشر می‌شود. برنامه Host ماژول‌هایی را از بیلدهای دور از طریق پیکربندی ویژه پلاگین ModuleFederationPlugin متصل می‌کند.

تاینده‌دهنده exposes ماژول‌های انتخابی را در دسترس قرار می‌دهد، و host از remotes برای اتصال آن‌ها استفاده می‌کند. Module Federation از کتابخانه‌های مشترک پشتیبانی می‌کند: اگر React در دو میکروبرنامه استفاده شود، Webpack آن را تنها یک بار بارگیری می‌کند. این باعث صرفه‌جویی تا 60% در ترافیک برای کاربر می‌شود. شرکت‌های بزرگی از جمله Segment و Best Buy از Module Federation در تولید استفاده می‌کنند و زمان استقرار را از ساعت به دقیقه کاهش داده‌اند.

مشکلات معمولی و راه‌حل‌ها

در کار با Module Federation، توسعه‌دهندگان معمولاً با تعارضات shared وابستگی‌های نسخه‌های مختلف مواجه می‌شوند. راه حل — مشخص کردن requiredVersion و singleton: true برای کتابخانه‌های حساس. مشکل دیگر — از دست رفتن کنتکست در ایمپورت کامپوننت‌ها از بیلد دور، به‌ویژه با React Context و Redux. برای حل، از shared: { react: { singleton: true } } استفاده کنید تا تضمین شود که همه میکروبرنامه‌ها از یک نسخه React استفاده کنند. برای معماری‌های بزرگ میکروفرونت، توصیه می‌شود از Module Federation با سیستم مونورپوزیتوریوم (Nx، Turborepo) برای همگام‌سازی نسخه وابستگی‌های مشترک و ایجاد اتساق در بیلدها استفاده کنید.