Loader ها در وب پک برای توسعه عملیات بیلد برای پشتیبانی از انواع Assets می باشد . Loader ها هم دقیقا مثل پلاگین ها یک سری پکیج هستند که چون مربوط به عملیات بیلد یا همان ابزار توسعه وب پک می باشند باید در طبقه بندی devDependencies قرار بگیرند.

Asset Loaders

وب پک به تنهایی قادر به تفسیر مازول های جاوا اسکریپت می باشد و درکی از syntax سایر فایل تایپ ها ندارد پس ما با استفاده از Loader ها می توانیم این موضوع را مرتفع کنیم.ابتدا باید درک کنیم که پروژه ما چه فایل تایپ هایی را قرار است استفاده کند. معمولا یک پروژه از فایل تایپ های زیر پشتیبانی می کند:

• Css
• Sass
• Javasript
• url (png|jpeg|svg… )
• Html

به ازای هر یک از فایل تایپ های بالا قرار است یک سری پکیج در قالب یک loader تعیین کنیم . ممکن است هر فایل تایپ بیش از یک Loader را نیاز داشته باشد. برای آشنایی با هر یک از پکیج ها (حال می توان Loader یا پلاگین باشد) حتما آن را در وبسایت npmjs.com بررسی بفرمایید.

دقت داشته باشید که هر فایلی که به هر نحوی در گراف وابستگی موجود باشد نیاز داریم تا Loader مربوط به آن را نصب کنیم. فرض کنید یک background-image در یک فایل css قرار دارد که این فایل در یکی از  entry point ها وارد شده باشد. به این ترتیب در این گراف حضور دارد و نیازمند وجود یک مفسر برای آن است که یک file-loader است.

Css Loader

Loader ها عملا برای ترجمه برای کامپایل توسط وب پک کاربرد دارند. پکیجی که باید فایل های محتوی کدهای syntax برابر css را تفسیر کند.این پکیج تنها برای خواندن کد ها است و به کمک پکیج های دیگری به سند html اضافه می گردد.برای استفاده از Loader ها باید ابتدا پکیج های آن ها را نصب کنیم (لودر و پلاگین در صورت لزوم) و در نهایت باید این تنظیمات این لودر و پلاگین را اعمال کنیم.برای این کار در syntax برابر با css لازم است :

• css-loader
• mini-css-extract-plugin
• style-loader

از میان style-loader و mini-css-extract-plugin باید یکی را جهت نصب انتخاب کنیم . تفاوت آن ها این است که در style-loader قرار است کد های کامپایل شده css به تگ head اضافه شود و در mini-css-extract-plugin می توان فایل ها را به سند link کرد.

برای این که از فایل های css برای کامپایل کدهای پروژه در وب پک استفاده کنیم لازم است که پکیج های لازم را با استفاده از دستورات زیر نصب کنیم.

npm install css-loader mini-css-extract-plugin --save-dev

پس از نصب این پکیج ها لازم است که تنظیمات این پکیج ها را (پلاگین و لودر) در فایل پیکره بندی اعمال کنیم

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const config = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use : [MiniCssExtractPlugin.loader,'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
}

module.exports = config

در syntax بالا لازم است که در بخش test یک عبارت منظم قرار بدهیم که تعیین می کند که فایل هایی با این فرمت نام (که با .css پایان یابد) باید با این لودر ها (use) تفسیر شود

. حال پارامتر use یک آرایه است که اگر لودر مد نظر option داشته باشد به صورت یک شئ و اگر نداشته باشد یک رشته است که در بالا  پیکره بندی بالا ساده ترین حالتی است که ما برای این لودر و پلاگین mini-css-extract-plugin در نظر گرفته ایم .اگر لودر مورد نظر option خاصی داشته باشد به صورت زیر عمل خواهیم کرد.

{
  test: /\.s?css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {}
      },
      {
        loader: 'css-loader',
        options: {}
      },
    ]
}

نکته مهم : دقت داشته باشید که برای این که لودر به درستی کار کند چه زمانی که style-loader استفاده می کنیم و چه زمانی که mini-css-extract-plugin استفاده می کنیم لازم است که لودر css-loader برابر با آخرین index از آرایه use باشد.

برای نمایش فایل خروجی این css می توان از option با نام filename استفاده کرد که این option قابلیت دریافت descriptor را نیز دارد . به این ترتیب می توان از [name],[ext],[contenthash] استفاده کرد.

new MiniCssExtractPlugin({
  //filename: 'assets/css/master.css',
  filename: '[name].[contenthash].css'
})

Sass Loader

در این نوع فایل یک سری لودر های دیگر برای تفسیر فایل های از نوع sass خواهیم داشت و در گام بعد لازم است که از همان لودر هایی که در Css Loader معرفی شد استفاده کنیم. به صورت شماتیک روش تفسیر به این شکل است که ابتدا باید Sass تبدیل به Css و در نهایت Css به سند اضافه شود . پکیج های زیر برای تفهیم Sass Syntax اضافه کنیم.

• sass-loader
• node-sass
• style-loader
• mini-css-extract-plugin

برای نصب پکیج ها باید دستور زیر را اجرا کنیم.

npm install node-sass sass-loader style-loader --save-dev

در فایل پیکره بندی در قسمت module.rules به این شکل rule را اضافه می کنیم. در اینجا ما لازم است از یکی از پکیج های style-loader یا mini-css-extract-plugin برای اضافه کردن این css به سند استفاده کنیم که در اینجا از style-loader استفاده کردیم.

{
    test: /\.scss$/,
    use: ['style-loader','css-loader','sass-loader']
}

نکته مهم : در این نوع از تفسیر نیز چون شروع تفسیر از sass شروع می شود باید sass-loader اخرین index از آرایه use باشد.همچنین باید پس از آن چون نوبت به تفسیر css می رسد باید css-loader بیاید.

همچنین می توانیم برای کوتاه تر شدن کد های پیکره بندی برای css و sass یک عبارت منظم بنویسیم که هم css و هم sass را با این لودر ها تفسیر و کامپایل کند.

{
  test: /\.s?css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
        options: {
          url: {},
        }
      },
      'sass-loader',
    ]
},

Asset Loader (file/url loader)

یکی دیگر از Assets هایی که می تواند در یک سند js یا css باشد انواع فایل است . به طور مثال می تواند یک فونت یا یک تصویر باشد. این نوع فایل به هر شکلی که در گراف وابستگی حضور پیدا کند لازم به تفهیم و تفسیر است . به طور مثال فونت هایی که در یک فایل css اضافه شده باشد یا تصویری که به عنوان یک background-image در یک فایل css باشد یا تصویری که به عنوان یک سورس در فایل js باشد. برای پشتیبانی از این نوع asset باید پکیج های زیر را نصب کنیم.

• file-loader
• url-loader

ما یکی از پکیج های بالا را برای پشتیبانی از فایل ها در پروژه نیاز خواهیم داشت که معمولا file-loader مرسوم تر است. برای نصب این لودر لازم است که دستور زیر را وارد کنیم.

npm install file-loader --save-dev

مثلا قصد داریم تصاویری که در فایل های js یا css آمده است را با این لودر تفسیر کند. برای پیکره بندی لازم است که به صورت زیر عمل کنیم.

{
    test: /\.(jpe?g|png|svg)$/,
    use: 'file-loader'
}

در این دایرکتوری از مخزن می توانید نصب انواع فونت و آیکن را چه با استفاده از مخزن npm و چه به صورت لینک مستقیم بررسی کنید.

نکته مهم : در بسیاری از موارد در زمان بیلد یک سری از resource ها مثلا فونت یا یک سری تصاویر لازم است که از مسیر node_modules تعیین شود. برای این که در این مسیر ها به node_modules اشاره کنیم از کاراکتر ~ استفاده می کنیم. این فایل شما در خط تولید بیلد وب پک است و خود وب پک با رسیدن به این کاراکتر می فهمد که باید از مسیر node_modules شروع کند . به طول مثال برای تعیین مسیر به یک فونت از مسیر node_modules به شکل زیر عمل کنیم.

@import '~sahel-font/dist/font-face.css';

JS Loader

به صورت پیش فرض فایل های فرمت js توسط وب پک خوانده و قابل Bundling می باشد. اما مساله ای که هست این که گاهی تکنولوژی هایی مثل JSX که به صورت کلی در هیچ مرورگری قابل پیاده سازی نیست یا EcmaScript هایی با نسخه های جدید برای برخی مرورگر ها قابل تفسیر نیست.برای حل این مشکل Loader هایی وجود دارد که با استفاده از آن ها می توان این تبدیل را به ES نسخه قدیمی که توسط عموم مرورگر ها قابل استفاده است انجام داد.

برای این کار لازم است که کتابخانه های زیر را نصب کنیم:

• babel-loader
• @babel/core
• @babel/preset-env

برای استفاده از این لودر لازم است تا تمامی پکیج های بالا را نصب کنیم.

npm install babel-loader @babel/core @babel/preset-env --save-dev

برای پیکره بندی این پکیج ها به صورت زیر عمل می کنیم.

{
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
        options: {
          exclude: ['node_modules'],
            presets: ['@babel/preset-env']
        }
    }
}

ممکن است شما از syntax خاصی استفاده کرده باشید که قابلیت تفسیر را نداشته باشد به این ترتیب لازم است که presets خاص آن را نصب کنید که با جستجوی متن خطا می توانید preset آن را پیدا و نصب کنید. در واقع این babel خود پلاگین هایی دارد که به آن presets می گوییم . به طور مثال preset هایی که با syntax کتابخانه react آسنا است babel/preset-react نام دارد.

Html Webpack Plugin

یک سند html برای نمایش اطلاعات به کار می رود. این سند یک سری css , js را نیز برای نمایش پویا تر اطلاعات در خود جای می دهد و همچنین ممکن است انواع دیگری از اطلاعات نظیر تصاویر را داشته باشد.

در وب پک می توان سند html را به یک bundle خاص تخصیص داد. هر Bundle از یک entry point گرفته می شود که بر اساس یک گراف وابستگی ها یک سری static assets را درخود دارد . مشکلی که در وب پک داریم این است که لازم است به صورت دستی این assets(js,css) ها را به سند اضافه کنیم. این مشکل زمانی بیش تر می شود که هر فایل از یک [contenthash] نیز برخوردار باشد. برای این کار پلاگین زیر می تواند مشکلات را برای ما حل کند.

• html-webpack-plugin

همانند سایر پلاگین ها باید ابتدا نصب و در گام بعد پیکره بندی لازم برای آن انجام شود.

npm install html-webpack-plugin --save-dev

این پلاگین option های مختلفی دارد که مهم ترین آن ها را در زیر بررسی خواهیم کرد. به صورت zero configuration تنها این پلاگین لازم دارد تا نام فایل را دریافت کند تحت عنوان option.template

const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    })
  ]
}
module.exports = config

Option(title,favicon)

می توان در option های این پلاگین title , favicon را نیز قرار داد . title باید توسط شما در خود سند ایجاد گردد ولی favicon تنها مسیر دهی نسبی آن در لیست option ها کافی است .

const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Html Webpack Plugin',
      filename: 'main.html',
      template: './src/index.html',
      favicon: './src/images/favicon.jpg',
    })
  ]
}

module.exports = config

در فایل html در قسمت title tag می توان به این شکل عمل کرد

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title><% htmlWebpackPlugin.options.title %></title>
</head>
<body>
   <h1>Create Template with html-webpack-plugin</h1>
</body>
</html>

تقسیم Bundle ها میان اسناد HTML

برای این که بتوان به ازای هر یک از اسناد یک Bundle خاص را به آن تخصیص داد لازم است لازم است که chunks استفاده کنیم. به این ترتیب هر سند html می تواند یک یا بیشتر Bundle دریافت کند.

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    index: './src/assets/js/index.js',
    about: './src/assets/js/about.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname,'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'html index template title',
      filename: 'index.html',
      template: 'src/index.html',
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      title: 'html about template title',
      filename: 'about.html',
      template: 'src/about.html',
      chunks: ['about'],
    })
  ]
}

به صورت کلی هر پروژه از یک سری نوع فایل های خاص استفاده می کند که به ازای هر کدام یک یا چند پکیج باید نصب و پیکره بندی گردد. این موضوع می تواند در قالب یک پلاگین یا یک لودر اتفاق بیفتد.