webpack چیست و چه ابزار هایی در اختیار ما قرار میدهد

webpack چیست و چه ابزار هایی در اختیار ما قرار میدهد نوشته شده در   webpack 6 ژانویه , 2019 توسط  عباس حسینی

هدف از این آموزش آماده سازی یک محیط توسعه مناسب برای توسعه اپلیکیشن هایی است که در آن از فریم ورک های جاوا اسکریپت مثل reactJs، vueJs و غیره استفاده میشود

استفاده از webpack امکاناتی چون کامپایل، فشرده سازی، باندل، بهینه سازی و بطور کلی نگهداری فایل های پروژه را در اختیار ما قرار میدهد بنابراین گزینه بسیار خوبی برای توسعه front-end میباشد و در این آموزش قصد دارم شما را با مفاهیم اصلی webpack آشنا کنم.

مفاهیم پایه ای webpack

entry point

قبل از توضیح entry point نیاز است که مفهوم dependency graph را برای شما توضیح بدهم
webpack هنگام ساخت فایل باندل به صورت recursive تمام ماژول ها را مورد بررسی قرار داده و با توجه به require و import های موجود در هر فایل وابستگی ها را استخراج و یک گراف از روی آن میسازد که به آن dependency graph میگویند

webpack dependency graph

entry point نقطه ای است که به webpack نشان میدهد که عمل dependency graph را از چه محلی باید شروع کند، دقت کنید که در تنظیمات webpack آدرس پیش فرض آن ./src/index.js میباشد که میتوان از طریق فایل کانفیگ آن را تغییر داد

output

output بخشی از تنظیمات webpack میباشد که تعیین میکند فایل باندل شده در چه مسیری و با چه نامی ذخیره شود و مسیر پیش فرض آن ./dist/main.js بوده که از طریق کانفیگ قابل تغییر است

در کد زیر نمونه ای از یک کانفیگ webpack که در آن entry point و output تعیین شده اند را مشاهده میکنید


const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

از آنجاییکه webpack به صورت پیش فرض فقط فایل های js و json را شناسایی میکند از طریق loader ها این امکان وجود دارد که فایل هایی مثل عکس، css ، scss و غیره برای webpack شناخته شده و بتوان آنها را داخل پروژه از طریق require یا import مورد استفاده قرار داد

به عنوان مثال به کد زیر توجه کنید :


const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

در این کد با استفاده از loader ها داخل کانفیگ قابلیتی به webpack اضافه کردیم که امکان لود کردن فایل های .txt را داشته باشد

plugin

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

 

به عنوان مثال در کد زیر از یک پلاگین برای استفاده شده است که در هر بار باندل کردن یک فایل html با کانفیگ تعیین شده برای ما تولید میکند


module.exports = {
    module: {
        rules: [{
            test: /\.txt$/,
            use: 'raw-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

در لینک زیر میتوانید برخی از آن را مشاهده و مورد بررسی قرار دهید

مفاهیم پایه ای webpack