وب پک چیست - راه اندازی مقدماتی webpack

وب پک چیست - راه اندازی مقدماتی webpack

وب پک چیست؟

وب پک یک ماژول باندلر برای برنامه های وب است که کد جاوا اسکریپت را به کد قابل فهم برای همه مرورگرها Bundle, minify و transpile (کامپایل source به source ) می کند. به عنوان یک توسعه دهنده جاوااسکریپت احتمالا در رابطه با ماژول ها از قبل چیزهایی شنیده اید. وب پک تعریف گسترده ای از اینکه ماژول چی هستند دارد و این موارد را در نظر می گیرد:

ماژول های ES, ماژول های CommonJS, بارگیری یا Import کردن CSS ، بحث Image URL ها یا ماژول های AMD.

مهم است بدانیم که وب پک روی صفحه واقعی در محیط production استفاده نمی شود. در طول فرآیند توسعه استفاده می شود. آنچه که در زمان production میبینیم یک bundle است که توسط وب پک تولید شده است.

وب پک چطور کار می کند؟

وب پک برنامه شما را بررسی کرده و یک گراف وابستگی متشکل از ماژول هایی که برنامه برای کار کردن نیاز دارد درست می کند. بعد، بسته به گراف واسبستگی یک پکیج جدید (معمولا یک فایل به نام bundle.js) درست می کند اما این فایل می تواند چندین فایل کوچکتر هم باشد که در صورت نیاز استفاده شوند. فایل پکیج که توسط وب پک درست شده به صورت script در HTML استفاده میشود و باعث می شود برنامه آنطور که انتظار داریم کار کند.

از نسخه 4.0 به بعد نیازی نیست فایل کانفیگ برای استفاده از وب پک به منظور باندل کردن پروژه استفاده کنیم. اما اگر بدانیم داخل این فایل چه چیزهایی می تواند قرار بگیرد به ما در فهم بهتر وب پک و نحوه کار کردن آن کمک بیشتری می کند.

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

نقطه ورودی وب پک مشخص می کمند که وب پک از کجا باید به ساخت گراف وابستگی شروع کند. از این نقطه سایر وابستگی ها مورد نیاز برای اینکه عملکرد مناسب برنامه ارائه شود پیدا خواهند شد. نقطه شروع پیش فرض ./src/index.js است.

خروجی وب پک نقطه ای است که وب پک باندل ها را کپی می کند و نام فایل باندل است. به طور پیش فرض main.js است و پوشه آن ./dist است اما درون فایل پیکربندی می توانید هر جای دیگری داخل برنامه را مشخص کنید و نام آن را هم تغییر دهید.

 loaders وب پک برای پردازش هر نوع فایل دیگیری استفاده میشود. به طور پیش فرض وب پک فقط می تواند json و javascript را شناسایی کند. به همین دلیل است که نیاز به تنظیمات اضافی برای تصاویر و استایل ها داریم. وظیفه اصلی loaders تبدیل این منابع به ماژول های صحیح است که بتوانند در گراف وابستگی بارگزاری شوند. در پیکربندی loaders وب پک سطح بالا دو مشخصه وجود دارد: test برای شناسایی فایل ها و فولدرهایی که باید منتقل شوند و use برای نشان دادن loader هایی که باید برای انتقال استفاده شوند.

 plugins وب پک برای اجرای رنج وسیع تری از وظایف مثل بهینه سازی باندل یا تزریق متغیرهای محیطی استفاده می شود. برای استفاده از plugins نیاز داریم تا آنها را با استفاده از require() بارگیری کرده و سپس به آرایه پلاگین ها اضافه کنیم.

 mode وب پک پارامتری است که به وب پک اجازه می دهد بداند محیط برنامه چیست. آن می تواند شامل مقادیر زیر باشد: development, production یا none. مقدار پیش فرض production است.

خوب، وقتی شما اکثر مفاهیم مهم وب پک را فهمیدید می توانیم به راه اندازی عملی وب پک بپردازیم.

چطور وب پک را راه اندازی کنیم؟

در این نقطه، دوست دارم یک برنامه ساده جاوا اسکریپت را با استفاده از وب پک راه اندازی کنم و مرحله به مرحله نشان دهم چطور کار می کند. برای این مقاله از وب پک ۵ استفاده می کنم.

نصب وب پک

بیاید یه پروژه جدید ایجاد کنیم و npm را در آن راه اندازی کنیم.

mkdir webpackTutorial && cd webpackTutorial

npm init -y

بعد بیاید همه ابزار لازم را نصب کنیم: webpack و webpack-cli

npm install webpack webpack-cli

زمانی که این مراحل با موفقیت به اتمام رسید بیاید یک ساختار پروژه ساده ایجاد کنیم و یک فایل حاوی کد ساده در آن اضافه کنیم.

حالا بیاید پوشه پروژه را باز کنیم و پوشه src و فایل index.js را مثل زیر اضافه کنیم.

درون فایل index.js یک کد جاوااسکریپت ساده اضافه کنیم و از طریق آن محتوایی را به فایل اصلی تزریق کنیم.

const title = document.createElement('h3');
title.textContent = 'Webpack made easy!';

const page = document.querySelector('body');
page.append(title);

پیکربندی وب پک

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

const path = require('path')

module.exports = {
  entry: {
    index: path.resolve(__dirname, './src/index.js') 
  }
}


در خط اول کد ماژول path را بارگیری کردیم که امکاناتی برای کار با مسیرهای فایل و پوشه ها ارائه می کند. این بخشی از Node.js است. سپس ما به وب پک می گویم کجا به دنبال اولین فایل بگردد که پایه ای برای ایجاد گراف وابستگی است. بعد ما می توانیم پوشه و فایلی که می خواهیم وب پک باندل ما را در آن ذخیره کند مشخص کنیم و این مقدار را در output می نویسیم.

const path = require('path')

module.exports = {
  entry: {
    index: path.resolve(__dirname, './src/index.js') 
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].bunde.js'
  }
}

در بخش output کانفیگ وب پک محل باندل را به پوشه ./build به جای مقدار پیش فرض ./dist تغییر دادیم و برای نام فایل یک متغیر پاس کردیم به طوریکه [name] فایل باندل ما در ورودی index.bundle.js مشخص خواهد شد.

پیکربندی کامل تری از webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      title: 'Webpack Example App',
      header: 'Webpack Example Title',
      metaDesc: 'Webpack Example Description',
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ],
  mode: 'development',
  output: {
    clean: true
  },
  devServer: {
    contentBase: './dist',
    open: true
  }
};

همین حالا می توانیم باندل وب پک را اجرا کنیم چون حداقل پیکربندی را داریم. حالا فایل package.json را باز می کنیم و آن را برای اجرای وب پک از طریق کنسول تنظیم می کنیم.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

زمانی که این مراحل انجام شد پروژه را در کنسول باز کرده و دستور زیر را اجرا می کنیم.

npm run build

یا در مثالی کامل تر:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},


و برای اجرا

npm run dev or npm run build

زمانی که این کار انجام شد چیزی شبیه تصویر زیر ار در کنسول خود می بینید. همچنین قادر خواهید بود یک پوشه جدید در برنامه خود بهمراه فایل باندل شده ببینید. هنوز چیز خاصی انجام نشده اما build با موفقیت انجام شده.


وب پک - پلاگین html

حالا به شما نشان می دهم چطوری پلاگین هایی را به کانفیگ وب پک اضافه کنیم تا آن را flexible تر کنیم. ما قصد داریم مقداری HTML به برنامه خود اضافه کنیم و لذا نیاز داریم که آن تولید شود و به این منظور نیاز به یک پلاگین وب پک داریم. پس html-webpack-plugin را نصب می کنیم.

npm install html-webpack-plugin

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


const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "./src/template.html")
    })
  ]
}

قبل از اینکه بخواهیم build خود را بروزرسانی کنیم نیاز است فایل template.html را ایجاد کنیم.

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="UTF-8">
    <title>Hello world!</title>
  </head>
  <body>
    Hello world!
  </body>
</html>

حالا bundle خود را مجددا build میکنیم و فایل index.html را که داخل پوشه build قرار دارد توسط مرورگر باز می کنیم. شما باید بتوانید محتوای فایل html را به همراه متنی که توسط فایل index.js به آن تزریق کردیم را ببینید.

 

 loaders وب پک

اگر ما بخواهیم هر نوع فایل دیگری مثل assets یا css را اضافه کنیم بایستی loader هایی را اضافه کنیم که اجازه بدهد وب پک آنها را بفهمد، آنها را کامپایل کند و استفاده کند. بیاید چند تا عکس به کد خودمان اضافه کنیم و سپس نیاز خواهیم داشت تا assets loader را ست کنیم

بیاید یک پوشه درون ./src ایجاد کنیم و آن را assets بنامیم. بیاید چند تا عکس داخلش بندازیم. و سپس آن را در فایل index.js بارگیری کنیم و به صفحه خود الحاق کنیم.

import koala from './assets/koala.png'


...

const img = new Image();
img.src = koala;
page.appendChild(img);

حالا برای اینکه بتوانیم باندل را بروز کنیم نیاز داریم تا یک loader به کانفیگ وب پک اضافه کنیم.

module: {
  rules: [
  {
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource',
  },
],
}

بیاید یه بار دیگه build کنیم و فایل index.js را درون مرورگر بروز کنیم و سپس می توانید عکس را زیر متن ببینید.

حالا بیاید در رابطه با نحوه استفاده از استایل ها با وب پک یاد بگیریم.

 css loader در وب پک

بیاید یک فایل استایل ساده ایجاد کنیم و آن را به فایل index.js بارگیری کنیم.

// style.css
body {
  text-align: center;
  margin: 20px;
}
h3 {
  color: #333333;
  background: #f5f5f5;
  padding: 20px;
}
img {
  max-height: 500px;
}

//index.js 
import './style.css';

حالا برای اینکه  بتوانیم تغییرات را ببینید نیاز داریم تا loaders برای css نصب کنیم: style-loader و css-loader.

npm install css-loader style-loader

زمانی که نصب شد به کانفیگ وب پک بر گردیم و قانون loader را اضافه کنیم.

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    },
    {
      test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
      type: 'asset/resource',
    },
  ],
}

بعد از آن باندل را build میکنیم و می بینیم که استایل ها کار می کنند.