تخفیف ویژه

همه چیز در مورد کار با Webpack 4 برای مدیریت Module bundling - قسمت 2 - آموزش کار با Loader ها

دسته بندی: آموزش
زمان مطالعه: 7 دقیقه
۱۲ دی ۱۳۹۷

همه چیز در مورد کار با Webpack 4 برای مدیریت Module bundling - قسمت 2در این قسمت میخوام مطلب همه چیز در مورد کار با Webpack 4 رو ادامه بدم و اطلاعات بیشتری رو در مورد Module bundling در اختیارتون قرار بدم.

Loaders

Loader به شما این امکان رو میده که بر روی فایلهایی که import میکنید، پیش پردازنده یا preprocessor‌های مورد نظرتون رو اجرا کنید. این امکان به شما اجازه میده که منابع استاتیک رو هم علاوه بر فایلهای Javascript در bundle خروجی قرار بدین. در ابتدا میخوایم ببینیم که چه کارهایی میتونیم در زمان لود شدن فایلهای Javascript انجام بدیم.

خب در اینجا میخوایم کدهای مدرن Javascript رو با استفاده از babel کامپایل کنیم و کاری کنیم که بتونیم از آخرین ویژگی‌های Javascript استفاده کرده و همه مرورگرها نیز از اون پشتیبانی بکنند. برای کار با Babel در پروژه، بسته‌های زیر رو نصب میکنیم:

  • babel-loader
  • @babel/core
  • @babel/preset-env
  • @babel/plugin-syntax-dynamic-import
  • @babel/polyfill

برای نصب این بسته‌ها در Command line دستور زیر را اجرا میکنیم:

npm i --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-syntax-dynamic-import

موارد بالا رو بصورت devDependencies نصب کردیم و @babel/polyfill رو بصورت dependencies نصب میکنیم. حالا کدهای درون فایل webpack.config.js رو بصورت زیر تغییر میدیم:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules:[
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

میبینید که در بخش module یک ویژگی rules اضافه شده و برای فایلهایی که در انتهای اونا .js قرار داره، babel-loader اعمال میشه. حالا در ریشه پروژه یک فایل بنام .babelrc به وجود میاریم و تنظیمات مربوط به babel رو در اون قرار میدم. کدهای زیر رو درون این فایل قرار میدم:

{
  "presets": [
    ["@babel/env", {
      "modules": false,
      "useBuiltIns": "entry",
    }],
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
}

این تنظیمات از کامپایل کردن import و Export جلوگیری میکنه و import‌های پویا و dynamic رو فعال میکنه که در ادامه و در بخش code splitting بیشتر در مورد اون توضیح میدیم. حالا کدهای زیر رو در فایل index.js قرار میدم:

import "@babel/polyfill";

const string = 'es8'.padStart(14, 'wow');
console.log(string);

همونطور که میبینید در کد بالا از padStart که در ES8 معرفی شده است، استفاده شده. حالا اگر کد رو با استفاده npm run build کامپایل کنیم و فایل index.html رو در مرورگر Internet explorer باز کنیم، میبینیم که wowwowwowwoes8 در console چاپ میشه و میبینید که این کدهای مدرن در مرورگر Internet explorer نیز پشتیبانی میشه.

استفاده از Sass

Loader‌ها میتونن در یک سری پشت سر هم بصورت زنجیری قرار بگیرن. برای فهم بیشتر بهتره که یک مثال رو بررسی کنیم. برای اینکار در ابتدا loader‌های زیر رو در پروژه نصب میکنیم:

npm i --save-dev style-loader css-loader sass-loader node-sass

حالا کدهای زیر رو به فایل webpack.config.js اضافه میکنیم:

  module.exports = {
    ...
    module: {
      rules: [
        ...
+       {
+         test: /\.scss$/,
+         use: [{
+           loader: 'style-loader'
+         }, {
+           loader: 'css-loader'
+         }, {
+           loader: 'sass-loader'
+         }]
+       }
      ]
    }
  }

این لودرها بصورت معکوس اعمال میشن:

  • sass-loader کدهای sass رو به css تبدیل میکنه
  • css-loader کدهای css رو به Javascript تبدیل میکنه و پیش نیازهای اون رو resolve میکنه
  • style-loader کدهای CSS رو در المنت style و در document شما قرار میده

حالا در دایرکتوری src یک فایل بنام style.scss رو میسازم و کدهای زیر رو در اون قرار میدم:

$bluegrey: #2b3a42;

pre {
  padding: 8px 16px;
  background: $bluegrey;
  color: #e1e6e9;
  font-family: Menlo, Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 1px 0 rgba(23, 31, 35, 0.5);
  border-radius: 3px;
}

حالا در فایل index.js فایل style.scss رو import میکنیم. بصورت زیر:

import { groupBy } from "lodash-es";
import people from "./people";

import './style.scss';

const managerGroups = groupBy(people, "manager");

const root = document.createElement("div");
root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`;
document.body.appendChild(root);

حالا اگر از پروژتون build بگیرید و خروجی رو در مرورگر باز کنید، خروجی بصورت زیر خواهد بود:

کار با تصاویر

آخرین مثالی که در مورد loader‌ها اون رو بررسی میکنیم، کار با تصاویر با استفاده از file-loader هست. در حالت عادی وقتی مرورگر به یک تگ img با ویژگی src یا یک المنت با ویژگی background-image برخورد میکنه، یک درخواست به سرور میده و اون تصویر رو دانلود میکنه و در مرورگر نمایش میده. با استفاده از Webpack میتونین برای تصاویر کوچک این روند رو بهینه سازی کرده و میتونین source یک تصویر رو بصورت رشته در Javascript ذخیره کنید. با اینکار تصویر مورد نظرتون preload میشه و مرورگر برای نمایش اون یک درخواست جداگانه نمیده.

برای اینکار file-loader رو بصورت زیر نصب میکنیم:

npm install --save-dev file-loader

حالا کدهای زیر رو در فایل webpack.config.js قرار میدیم:

  module.exports = {
    ...
    module: {
      rules: [
        ...
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           {
+             loader: 'file-loader'
+           }
+         ]
+       }
      ]
    }
  }

فرص کنید که یک تصویر بنام code.png در دایرکتوری src داریم. حالا یک فایل بنام image.js میسازیم و کدهای زیر رو درونش قرار میدیم:

import codeURL from "./code.png";

const img = document.createElement("img");
img.src = codeURL;
img.style = "background: #2B3A42; padding: 20px";
img.width = 32;
document.body.appendChild(img);

حالا این فایل رو در index.js وارد میکنیم. حالا اگر خروجی رو در مرورگر مشاهده کنیم، میبینید که تصویر مورد نظر در صفحه قرار گرفته است. شما همچنین میتونین فونت و اطلاعات دیگه رو لود کنیم.

Dependency Graph

شما الان متوجه میشید که loader‌ها چطور میتونن بقیه منابع مختلف رو در کنار فایلهای Javascript لود کنند. پس الان باید تصویری که در وبسایت Webpack قرار داده شده است رو بهتر متوجه بشید:

همونطور که میبینید همه منابعی که در فایل entry جاوااسکریپت قرار داده شده است، لود میشن و کارهای مورد نظر بر روی اونا انجام میشه و خروجی بصورت استاتیک در اختیارتون قرار میگیره.

Code splitting

همونطور که در مستندات Webpack گفته شده، Code splitting بصورت زیر تعریف میشه.

Code splitting یکی از مهمترین و بهترین ویژگی‌های Webpack هست. این ویژگی به شما این امکان رو میده که کدهای خودتون رو به Bundle‌های متعددی تقسیم‌بندی کنید و اونا رو بصورت وابسته به هم و یا بصورت موازی در کنار یکدیگر لود کنید. با استفاده از این ویژگی میتونین پروژتون رو بهینه‌تر کنید و با سرعت بیشتری سایتتون رو لود کنید.

همونطور که تا اینجا دیدید فقط یک فایل entry بنام index.js داریم و فقط یک فایل خروجی یا output رو به وجود آوردیم. بعد از مدتی که پروژتون بزرگتر میشه باید کدهاتون رو به تکه‌های کوچکتری تبدیل کنید تا مرورگر مجبور نباشه که در همان شروع سایت، همه کدها رو بصورت یک فایل دانلود کنه. یک راه خوب برای حل کردن این مشکل، استفاده از Code splitting یا Lazy loading هست.

در قسمت بعد بیشتر در مورد Code splitting توضیح میدیم و اطلاعات بیشتری رو در مورد Webpack در اختیارتون قرار میدم.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

a_bahoush

سلام
چرا ادامه نداره اگه نمیخواین ادامه بدین لینک آخر رو که دوباره همین صفحه باز میکنه پاک کنین ممنون

Alireza Bahoush

با سلام ممنون از مقاله البته میتونست با جزئیات بیشتر و مثلا یک پروژه باحالی همراه باشه . در ضمن در قسمت دوم در انتها نوشتید قسمت بعد که وقتی کلیک میکنی دوباره همین قسمت رو میاره با اینکه خیلی دیر شده ولی بهتره ادامه بدین

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :