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

هر درخواست که از سمت مرورگر به سرور می رسد یک سری resource را از Response (با هر content-type مثلا html,json,…) که توسط سرور برگشت داده شده است دریافت می کند.این resource ها می تواند از favicon, images, css, js … یا لینک های cdn و بقیه موارد باشند. این resource ها را در تب network در مرورگر می توانید مشاهده کنید.

Cache Busting

در هر Response که توسط سرور ارسال و توسط مرورگر دریافت می شود تعدادی resource است و هر resource برای اولین بار که درخواست داده می شود توسط مرورگر دانلود می شود و در مرورگر (اصطلاحا همان کامپیوتر کاربر) کش می شود. در درخواست دوم همین Request Url مجددا این resource ها برای نمایش سند لازم است .

resource هایی که نام آن ها دقیقا مطابق با درخواست قبلی بوده است از حافظه کش سیستم خوانده می شود. این به سرعت لود صفحات کمک می کند اما مشکلی که با این روال بوجود می آید است که اگر تغییری در محتوای resource اتفاق افتاده باشد با توجه به عدم تغییر نام آن ممکن است توسط مرورگر اعمال نشده باشد. برای حل این موضوع برخی سیستم ها از query string برای درخواست لینک استفاده می کنند.وب پک نیز برای حل این موضوع می تواند

انواع داده هایی که برای cache busting می توان پیاده سازی کرد :

• css : این کار با استفاده از پلاگین min-css-extract-plugin و [contenthash] انجام می شود.
• js : در زمانی که قرار است output را تعیین کنیم می توانیم در انتهای نام فایل و پیش از پسوند فایل [contenthash] قرار بدهیم.

با این روال contenthash با توجه به محتوای صفحه ایجاد می شود .پس از هر بار بیلد و تغییر assets های بالا فایل های جدیدی ایجاد می شود و لازم است که فایل های قبلی پاک شود . برای این موضوع پلاگینی وجود دارد که پیش از بیلد محتوای جدید محتوای پیشین دایرکتوری dist را کاملا پاک می کند.

• clean-webpack-plugin

برای نصب این پلاگین دستور زیر را وارد کنید.

npm install clean-webpack-plugin --save-dev

همان طور که در فایل پیکره بندی زیر مشاهده می کنید علاوه بر وجود contenthash در بخش های output برای فایل های js و در پلاگین MiniCssExtractPlugin برای فایل های css همچنین پلاگین CleanWebpackPlugin نیز برای پاکسازی دایرکتوری dist موجود می باشد.

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
   mode: "development",
   entry: {
      index: './src/index.js'
   },
   output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname,'dist')
   },
   plugins: [
      new MiniCssExtractPlugin({
         filename: '[name].[contenthash].css'
      }),
      new CleanWebpackPlugin(),
   ]
}

Optimization

یکی دیگر از اهدافی که وب پک آن را دنبال می کند این است که بتواند resource هایی که مرورگر درخواست برای دانلود آن ها را می دهد بهینه سازی کند. در این رابطه فایل های css , js یکی از مهم ترین دسته فایل هایی است که وب پک می تواند آن ها را برای لود سریعتر صفحه بهینه سازی کند.

برای بهینه سازی فایل های css , js باید پلاگین های آن ها را نصب و در فایل پیکره بندی وب پک سازنده آن ها را فراخوانی کرد.

• terser-webpack-plugin
• css-minimizer-webpack-plugin

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

npm install css-minimizer-webpack-plugin --save-dev
npm install terser-webpack-plugin --save-dev

در گام بعد باید در فایل پیکره بندی webpack.config.js این دو پلاگین را در بخش plugins شی آن ها را اضافه کنیم

optimization: {
  minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ]
}

دقت داشته باشید که در این بخش لازم است که گزینه minimize را برابر با true قرار بدهیم تا عملیات optimization اتفاده بیفتد.

Webpack Dev Server

ابزار دیگری که در وب پک موجود است و سرعت توسعه بخش Front را برای ما بیشتر می کند سرور مجازی است که وب پک با آن کار می کند . این سرور مجازی متعلق به مود development است که مداما در حال rebuild سورس خام شما است و روی یک پورت آزاد برای شما پروژه را روی کلاینت مرورگر اجرا می کند.

• webpack-dev-server

این پلاگین به صورت zero configuration موجود است ولی تنظیماتی از قبیل تعیین پورت یا به صورت پیش فرض باز شدن کلاینت مرورگر و … دارد. من به صورت zero configuration از آن استفاده می کنم.

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

npx webpack serve

نکته بسیار مهمی که باید در حین استفاده از وب سرور وب پک در نظر داشته باشید این است که اگر تغییراتی در فایل پیکره بندی وب پک ایجاد کردید باید وب سرور را یک بار متوقف و مجددا راه اندازی کنید. به طور مثال اگر تغییراتی در تنظیمات پلاگین خاصی مثلا html-webpack-plugin به طور مثال اضافه کردن option با نام favicon ایجاد کردید یا مثلا یک لودر جدید یا پلاگین جدید نصب کردید برای نمایش تغییرات لازم به اجرای مجدد وب سرور است.

تنظیمات کاربردی این سرور در همان فایل webpack-dev-server می باشد. دو تنظیم مهم برای وب سرویس در پروژه هایی که با وب پک مدیریت می شوند عبارتست از :

devServer: {
  port: 3000,
    historyApiFallback: true,
}

• port : پورت سرور . از آنجایی که روی localhost است از پورت های پیش فرض یا پورت های سایر وب سرویس های نصب روی سیستم عامل مثلا Apache استفاده نکنید.
• historyApiFallback : این تنظیم به گونه ای است که زمانی که درخواست همراه با یک State به سرور می رود یک دایرکتوری جدید نمی داند و همانند route عمل می کند و درخواست به index می رود تا بتوان مدیریت state را با کنترلر و روتر انجام داد.
  

Webpack Modes

در وب پک ما دو مود اجرایی برای بیلد خواهیم داشت . سورس فارغ از این که در کدام مود هستیم تغییری نخواهد داشت اما تغییرات ما در مود های مختلف مربوط به فایل پیکره بندی وب پیک یا همان webpack.config.js است .

به صورت پیش فرض فایل webpack.config.js به عنوان فایل پیش فرض پیکره بندی شناخته می شود . در این فایل لازم است که مود را دستی تعیین کنیم. ما می توانیم به ازای هر مود یک فایل جداگانه تعیین کنیم.

• Develpment : webpack.config.dev.js
• Production : webpack.config.prod.js

همان طور که در بالا دیدیم با توجه به هر مود می توانیم یک سری تنظیمات داشته باشیم . حال این نکته مطرح است که چه تنظیماتی در این دو مود با هم تفاوت دارند. تفاوت این دو مود (Development/Production) در این است:

• در مود توسعه ما در حال rebuild هستیم و در مود تولید نهایی تنها یک build خواهیم داشت.
• در مود توسعه ما کد های خام و ماژول ها را در اختیار داریم و به راحتی می توانیم دیباگ کنیم ولی در مود تولید نهایی ما تنها توزیع نهایی اجرا شده در کلاینت مرورگر را داریم و برای دیباگ باید به همان کد ها اتکا کنیم که باید حدالامقدور خوانا باشد.

پس سرعت rebuild و خوانایی دو پارامتر مهم در مود های Production , Development می باشد. خوب حال ما دو فایل پیکره بندی به ازای هر مود با نام های گفته شده در بالا می سازیم.

تفاوتی که در این دو مود ما خواهیم داشت این است که باید نوع کامپایل فایل های جاوا اسکریپت را در هر مود به صورت جدا تعیین کنیم.این یک option است که devtool نام دارد و سرعت و خوانایی را تعیین می کند.بنا به تشخیص باید در مود develpment برابر با eval باشند و در مود production برابر با source-map باشند.

حال باید دستور اجرایی در مود Development و Production تعیین کنیم.

Scripts

webpack build --config webpack.config.prod.js

webpack build --config webpack.config.dev.js

نکته مهمی که وجود دارد این که که تنظیمات در فایل های پیکره بندی webpack.config.dev.js و webpack.config.prod.js بخش های مشترکی دارند و بنا به اصل DRY(Don’t Repeat Yourself) باید به شکلی عمل کنیم که این بخش های مشترک را در یک فایل پیکره بندی مجزا با نام webpack.config.common.js نگه داری کنیم.برای این کار از پلاگین زیر کمک می گیریم.

• webpack-merge

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

npm install webpack-merge --save-dev

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

webpack.config.common.js

const path = require('path')
const config = {
  //entry output
  //modules.rules
  //plugins
  //optimization
}

module.exports = config

webpack.config.prod.js

const {merge} = require('webpack-merge')
const commonConfig = require('./webpack.config.common.js')

module.exports = merge(commonConfig,{
   mode: "production",
   devtool: "source-map"
})

webpack.config.dev.js

const {merge} = require('webpack-merge')
const commonConfig = require('./webpack.config.common.js')

module.exports = merge(commonConfig,{
   mode: "development",
   devtool: "eval",
})

در نهایت برای اجرا در مود های مختلف باید script های آن را در بخش پیکره بندی package.json اضافه کنیم:

"scripts": {
   "build": "webpack build --config webpack.config.prod.js",
   "dev": "webpack build --config webpack.config.dev.js",
   "serve": "webpack serve --config webpack.config.dev.js"
},

با توجه به اسکریپت های بالا می توانیم بگوییم که سه نوع بیلد داریم :

• dev : بیلد با تنظیمات محیط توسعه
• build : بیلد برای تولید نهایی
• serve : همان dev است که با پلاگین سرور مجازی وب پک کار می کند