راهنمای مبتدیان برای بسته بندی وب

.ArticleCopy img {حاشیه: جامد 1 پیکسل خاکستری! مهم؛ }

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

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

توجه: در این آموزش از webpack 5.9.0 استفاده کرده ام.

Webpack چیست؟

وب پک به عنوان هسته اصلی خود ، یک بسته نرم افزاری ثابت است. در یک پروژه خاص ، وب پک تمام پرونده ها و دارایی ها را به عنوان ماژول در نظر می گیرد. زیر کاپوت ، به نمودار وابستگی متکی است. نمودار وابستگی نحوه ارتباط ماژول ها با استفاده از منابع را به یکدیگر توصیف می کند (نیاز و وارد كردن عبارات) بین پرونده ها. به این ترتیب ، وب پک به صورت ایستایی تمام ماژول ها را برای ساخت نمودار رد می کند و از آن برای تولید یک بسته (یا چند بسته) – یک فایل جاوا اسکریپت حاوی کد همه ماژول ها به ترتیب صحیح استفاده می کند. “از نظر آماری” به این معنی است که ، وقتی webpack نمودار وابستگی خود را ایجاد می کند ، کد منبع را اجرا نمی کند بلکه ماژول ها و وابستگی های آنها را به هم پیوند می بخشد. سپس این می تواند در پرونده های HTML شما گنجانده شود.

حال ، برای گسترش مروری کلی بالا ، بیایید مفاهیم اصلی مورد استفاده وب پک را بررسی کنیم.

مفاهیم اصلی Webpack

Webpack دارای برخی مفاهیم اصلی است که ما باید قبل از شروع اجرای عملی آن ، آنها را به وضوح درک کنیم. بیایید آنها را یکی یکی بررسی کنیم:

ورود: نقطه ورود ماژولی است که وب پک از آن برای شروع ساخت نمودار وابستگی داخلی خود استفاده می کند. از آنجا ، مشخص می کند که آن نقطه ورود به کدام ماژول ها و کتابخانه ها وابسته است (مستقیم و غیرمستقیم) و آنها را در نمودار گنجانده تا زمانی که هیچ وابستگی باقی نماند. به طور پیش فرض ، ویژگی ورودی بر روی تنظیم شده است ./src/index.js، اما ما می توانیم یک ماژول متفاوت (یا حتی چند ماژول) را در پرونده پیکربندی webpack تعیین کنیم.
خروجی: ویژگی خروجی به بسته وب دستور می دهد که کجا بسته (های) را منتشر کند و از چه نامی برای پرونده (ها) استفاده کند. مقدار پیش فرض این ویژگی برابر است ./dist/main.js برای بسته اصلی و ./dist برای سایر پرونده های تولید شده – مثلاً تصاویر. البته بسته به نیاز خود می توانیم مقادیر مختلفی را در پیکربندی مشخص کنیم.
لودرها: به طور پیش فرض ، webpack فقط پرونده های JavaScript و JSON را می فهمد. برای پردازش انواع دیگر پرونده ها و تبدیل آنها به ماژول های معتبر ، وب پک از لودرها استفاده می کند. لودرها کد منبع ماژول های غیر جاوا اسکریپت را تغییر می دهند و به ما امکان می دهند قبل از اضافه شدن آنها به نمودار وابستگی ، از قبل پردازش کنیم. به عنوان مثال ، یک لودر می تواند پرونده ها را از یک زبان CoffeeScript به JavaScript یا تصاویر درون خطی را به URL های داده تبدیل کند. با لودرها می توانیم مستقیماً پرونده های CSS را از ماژول های JavaScript وارد کنیم.
پلاگین ها: افزونه ها برای هر کار دیگری که لودرها نمی توانند انجام دهند استفاده می شود. آنها طیف گسترده ای از راه حل ها در مورد مدیریت دارایی ، به حداقل رساندن بسته بندی و بهینه سازی بسته و غیره را در اختیار ما قرار می دهند.
حالت: به طور معمول ، وقتی برنامه خود را توسعه می دهیم با دو نوع کد منبع کار می کنیم – یکی برای ساخت توسعه و دیگری برای ساخت تولید. Webpack به ما این امکان را می دهد که با تغییر پارامتر حالت به تنظیمات دلخواه خود بپردازیم توسعه، تولید یا هیچ یک. این به وب پک اجازه می دهد تا از بهینه سازی های داخلی مربوط به هر محیط استفاده کند. مقدار پیش فرض است تولید. هیچ یک حالت به این معنی است که از گزینه های بهینه سازی پیش فرض استفاده نمی شود. برای کسب اطلاعات بیشتر در مورد گزینه هایی که وب پک در آن استفاده می کند توسعه و تولید حالت ، بازدید از صفحه پیکربندی حالت.

نحوه کار بسته وب

در این بخش ، نحوه کار وب پک را بررسی خواهیم کرد. حتی یک پروژه ساده شامل فایل های HTML ، CSS و JavaScript است. همچنین ، می تواند شامل دارایی هایی مانند قلم ها ، تصاویر و غیره باشد. بنابراین ، یک گردش کار معمولی وب پک شامل تنظیم یک index.html پرونده با پیوندهای CSS و JS مناسب و دارایی های لازم. همچنین ، اگر ماژول های CSS و JS زیادی دارید که به یکدیگر بستگی دارند ، باید بهینه شده و به درستی در یک واحد آماده تولید ترکیب شوند.

برای انجام همه اینها ، بسته وب به پیکربندی متکی است. از نسخه 4 به بالا ، وب پک پیش فرض های معقول و منطقی را از جعبه ارائه می دهد ، بنابراین ایجاد یک فایل پیکربندی مورد نیاز نیست. با این حال ، برای هر پروژه غیر پیش پا افتاده شما باید یک ویژه را ارائه دهید webpack.config.js file ، که چگونگی تبدیل پرونده ها و دارایی ها و تولید نوع خروجی را توصیف می کند. این پرونده می تواند به سرعت یکپارچه شود ، و درک این مسئله که وب پک چگونه وظیفه خود را انجام می دهد دشوار است ، مگر اینکه از مفاهیم اصلی کارکرد آن مطلع شوید.

بر اساس پیکربندی ارائه شده ، وب پک از نقاط ورودی شروع می شود و هر ماژولی را که هنگام ساخت نمودار وابستگی با آن روبرو می شود ، برطرف می کند. اگر یک ماژول شامل وابستگی باشد ، فرآیند به صورت بازگشتی و در مقابل هر وابستگی انجام می شود تا زمانی که مسیر عبور انجام شود. سپس وب پک تمام ماژول های پروژه را به تعداد کمی بسته نرم افزاری – معمولاً فقط یک مورد – بسته می شود تا توسط مرورگر بارگیری شود.

What’s New in Webpack 5

انتشار یک بسته وب 5 در اکتبر سال 2020 اعلام شد. این پست کاملا طولانی است و تمام تغییرات ایجاد شده در وب پک را بررسی می کند. ذکر همه تغییرات غیرممکن است و برای راهنمای مبتدی مانند این غیر ضروری است. درعوض ، سعی می کنم یک لیست کوچک با نکات برجسته کلی قرار دهم:

عملکرد ساخت با Persistent Caching بهبود می یابد. اکنون توسعه دهندگان می توانند یک حافظه نهان مبتنی بر سیستم فایل را فعال کنند ، که سرعت توسعه را سرعت می بخشد.
ذخیره طولانی مدت نیز بهبود یافته است. در وب پک 5 ، تغییراتی که در کدی اعمال می شود و تاثیری در نسخه بسته نرم افزاری به حداقل رسانده شده ندارند (نظرات ، نام متغیرها) منجر به عدم اعتبار حافظه پنهان نمی شود. همچنین ، الگوریتم های جدیدی اضافه شد که شناسه های عددی کوتاه را به ماژول ها و قطعه ها و نام های کوتاه را به روش تعیین کننده اختصاص می دهد. در وب پک 5 ، آنها به طور پیش فرض در حالت تولید فعال می شوند.
اندازه بسته بهبود یافته ، به لطف بهتر لرزش درخت و ایجاد کد. به لطف ویژگی جدید Nested Tree-Shaking ، وب پک اکنون قادر است دسترسی به خصوصیات تودرتو صادراتی را ردیابی کند. CommonJs Tree Shaking به ما این امکان را می دهد که صادرات استفاده نشده CommonJs را حذف کنیم.
حداقل نسخه پشتیبانی شده Node.js از 6 به 10.13.0 (LTS) افزایش یافته است.
پایگاه کد تمیز می شود. همه موارد علامت گذاری شده به عنوان منسوخ در وب 4 بسته حذف می شوند.
پر کردن خودکار Node.js حذف می شود. نسخه های قبلی وب پک شامل polyfills برای کتابخانه های Node.js بومی مانند crypto. در بسیاری از موارد غیرضروری هستند و به شدت بسته را افزایش می دهند. به همین دلیل وب پک 5 به طور خودکار پر کردن این ماژول های اصلی را متوقف می کند و روی ماژول های سازگار با جلو تمرکز می کند.
به عنوان یک پیشرفت ، وب پک 5 به ما امکان می دهد لیستی از اهداف را منتقل کنیم و همچنین نسخه های هدف را پشتیبانی کنیم. تعیین خودکار مسیر عمومی را فراهم می کند. و همچنین ، این نامگذاری خودکار و منحصر به فرد را ارائه می دهد ، که از ایجاد تضاد بین چندین بار اجرای بسته وب که از یک متغیر جهانی یکسان برای بارگذاری قطعه استفاده می کنند ، جلوگیری می کند.
webpack-dev-server فرمان اکنون است webpack serve.
ماژول های دارایی معرفی می شوند ، که جایگزین موارد استفاده می شوند file-loader، raw-loader، و url-loader.

لطفاً برای یافتن اطلاعات کامل و دقیق در مورد تمام به روزرسانی ها ، پیوند اعلانات بالا را باز کنید.

سرانجام ، اگر از وب پک 4 می آیید ، در اینجا موارد زیر را مشاهده می کنید راهنمای مهاجرت.

شروع شدن

توجه: می توانید فایل های پروژه ما را در repo GitHub.

اکنون که یک پایه نظری محکم داریم ، بیایید آن را در عمل پیاده کنیم.

برای شروع ، ما یک دایرکتوری جدید ایجاد می کنیم و به آن تغییر می دهیم. سپس یک پروژه جدید را شروع می کنیم:

mkdir learn-webpack
cd learn-webpack
npm init -y

بعد ، باید webpack و webpack CLI (رابط خط فرمان) را به صورت محلی نصب کنیم:

npm install webpack webpack-cli --save-dev

در حال حاضر ، محتوای تولید شده است package.json باید شبیه موارد زیر باشد:

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0"
  }
}

علاوه بر اینکه مدیر بسته است ، npm می تواند به عنوان یک دونده وظیفه ساده استفاده شود. ما می توانیم با درج نام وظیفه خود و به دنبال آن دستورالعمل های آن ، وظایف وب بسته را ایجاد کنیم scripts بخش از package.json فایل. بیایید این را اکنون امتحان کنیم. باز کن package.json و تغییر دهید scripts به موارد زیر اعتراض کنید:

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

در داخل scripts ویژگی، npm به ما اجازه می دهد بسته های Node.js را که به صورت محلی نصب شده اند ، با نام آنها ارجاع دهیم. ما از آن و --mode پرچم برای تعریف dev و build وظایف ، که در توسعه وب بسته را اجرا می کند (npm run dev) و تولید (npm run build) حالت به ترتیب

قبل از آزمایش وظایفی که به تازگی ایجاد کرده ایم ، بیایید a ایجاد کنیم src فهرست قرار داده و قرار دهید index.js پرونده را در آن قرار دهید تا حاوی آن باشد console.log("Hello, Webpack!");. اکنون می توانیم برنامه را اجرا کنیم dev وظیفه راه اندازی بسته وب در حالت توسعه:

$ npm run dev

> learn-webpack@1.0.0 dev C:WEBDEVlearn-webpack
> webpack --mode development

[webpack-cli] Compilation finished
asset main.js 874 bytes [emitted] (name: main)
./src/index.js 31 bytes [built] [code generated]
webpack 5.9.0 compiled successfully in 122 ms

همانطور که قبلاً اشاره کردم ، webpack نقطه ورود پیش فرض را روی تنظیم می کند ./src/index.js و خروجی پیش فرض به ./dist/main.js. وقتی webpack کار می کند چه کاری انجام می دهد dev وظیفه این است که کد منبع را از index.js کد نهایی را در یک فایل وارد کنید و بسته بندی کنید main.js فایل.

عالی! مطابق انتظار کار می کند. اما برای تأیید اینکه خروجی صحیحی دریافت کرده ایم ، باید نتیجه را در مرورگر نمایش دهیم. برای انجام این کار ، بیایید یک ایجاد کنیم index.html پرونده در dist فهرست راهنما:

<!doctype html>
<html>
  <head>
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

حال ، اگر پرونده را در مرورگر باز کنیم ، باید موارد زیر را مشاهده کنیم سلام ، وب پک! پیام در کنسول.

تا کنون خیلی خوب. اما نوشتن ما index.html پرونده به صورت دستی در برخی موارد می تواند مشکل ساز باشد. به عنوان مثال ، اگر نام نقطه ورود خود را تغییر دهیم ، بسته نرم افزاری تولید شده تغییر نام می یابد ، اما نام ما index.html پرونده همچنان نام قدیمی را ارجاع می دهد. بنابراین ، ما باید هر بار که نام یک ورودی را تغییر نام می دهیم یا یک مورد جدید اضافه می کنیم ، پرونده HTML خود را به صورت دستی به روز کنیم. خوشبختانه ، ما می توانیم به راحتی با html-webpack-plugin. بیایید اکنون آن را نصب کنیم:

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

توجه: توجه داشته باشید که تایپ کرده ام html-webpack-plugin@next به جای فقط html-webpack-plugin. در زمان نگارش ، نسخه اول نسخه مناسب وب پک 5 است ، و نسخه دوم نسخه وب پک 4 است. این می تواند در آینده تغییر کند ، بنابراین برای نسخه واقعی آن را بررسی کنید repo html-webpack-plugin.

در این مرحله ، برای فعال سازی افزونه ، باید یک a ایجاد کنیم webpack.config.js پرونده را در فهرست ریشه با محتوای زیر قرار دهید:

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Output",
    }),
  ],
};

همانطور که مشاهده می کنید ، برای فعال سازی یک افزونه webpack ، باید آن را در پرونده قرار دهیم و سپس به آن اضافه کنیم plugins آرایه. در صورت نیاز ، گزینه هایی را نیز به پلاگین منتقل می کنیم. را ببینید html-webpack-plugin repo برای همه گزینه های موجود و توانایی الگوهای خود را بنویسید و استفاده کنید.

بیایید اکنون وب پک را اجرا کنیم تا ببینیم چه اتفاقی می افتد:

$ npm run dev

> learn-webpack@1.0.0 dev C:WEBDEVlearn-webpack
> webpack --mode development

[webpack-cli] Compilation finished
asset main.js 874 bytes [compared for emit] (name: main)
asset index.html 234 bytes [emitted]
./src/index.js 31 bytes [built] [code generated]
webpack 5.9.0 compiled successfully in 151 ms

بیایید باز کنیم index.html. همانطور که می بینیم ، این پلاگین به طور خودکار یک بروزرسانی را ایجاد می کند index.html پرونده ای برای ما ، که از title گزینه از پیکربندی:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Output</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="main.js"></script>
  </head>
  <body>
  </body>
</html>

بیایید اکنون پروژه خود را گسترش دهیم و نام های سفارشی را برای entry و output خواص که در webpack.config.js موارد زیر را قبل از اضافه می کنیم plugins ویژگی:

entry: {
  main: path.resolve(__dirname, './src/app.js'),
},
output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'deploy')
},

در اینجا ، پرونده ورودی را به تغییر می دهیم app.js و پوشه خروجی به deploy. ما همچنین نام فایل بسته نرم افزاری تولید شده را کمی تغییر می دهیم. اکنون با نام مدخل (“اصلی”) و سپس با کلمه “بسته نرم افزاری” و .js فرمت فایل.

اکنون ، یک ایجاد خواهیم کرد src/component.js فایل:

export default (text = "Hello, Webpack!") => {
  const element = document.createElement("h1");

  element.innerHTML = text;

  return element;
};

بعد ، نام جدید را تغییر می دهیم index.js به app.js برای انعکاس تغییرات ما ، و محتوای آن را با موارد زیر جایگزین کنید:

import component from './component';

document.body.appendChild(component());

حالا ، بیایید دوباره بسته وب را اجرا کنیم:

$ npm run dev

> learn-webpack@1.0.0 dev C:WEBDEVlearn-webpack
> webpack --mode development

[webpack-cli] Compilation finished
asset main.bundle.js 4.67 KiB [emitted] (name: main)
asset index.html 241 bytes [emitted]
runtime modules 668 bytes 3 modules
cacheable modules 230 bytes
  ./src/app.js 79 bytes [built] [code generated]
  ./src/component.js 151 bytes [built] [code generated]
webpack 5.9.0 compiled successfully in 194 ms

بیایید اطلاعات را از خروجی وب پک بررسی و روشن کنیم. پس از پیام “کامپایل به پایان رسید” می توانید فایل های تولید شده در deploy فهرست راهنما (main.bundle.js و index.html) در زیر آنها ، می توانید پرونده های منبع را مشاهده کنید: ماژول ورودی (app.js) و وابستگی آن (component.js)

بنابراین اکنون ، در deploy پوشه ، ما فایل بسته نرم افزاری تازه تولید شده را داریم main.bundle.js. اگر باز کنیم index.html پرونده در مرورگر ، ما باید ببینید سلام ، وب پک! در صفحه نمایش داده می شود.