از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای Webpack 5 در روزهایی که ماژولار بودن در جاوا اسکریپت معرفی شد، هیچ راهی برای پشتیبانی از ماژول ها در مرورگرهای وب وجود نداشت. برای رفع این مشکل، بسته‌های ماژول مانند Parcel، Webpack و Rollup توسعه یافتند. اینها به بهینه سازی چندین ماژول در یک بسته آماده برای تولید کمک کردند که می تواند توسط مرورگرها اجرا شود.
سرفصلهای مطلب
در روزهایی که ماژولار بودن در جاوا اسکریپت معرفی شد، هیچ راهی برای پشتیبانی از ماژول ها در مرورگرهای وب وجود نداشت. برای رفع این مشکل، بسته‌های ماژول مانند Parcel، Webpack و Rollup توسعه یافتند. اینها به بهینه سازی چندین ماژول در یک بسته آماده برای تولید، که می تواند توسط مرورگرها اجرا شود، کمک کرد.
امروزه، وقتی صحبت از اکوسیستم بسته‌بندی ماژول‌ها می‌شود، ابزاری که بیشترین استفاده را دارد روی لب همه وب پک است.
برای من، وب‌پک برای مقابله با آن بسیار ترسناک بود، ترجیح می‌دهم به سراغ ابزارهایی مانند این کار بروم vue-create اگر من نیاز به راه اندازی یک پروژه Vue داشتم یا create-react-app برای راه اندازی یک برنامه React، فقط برای جلوگیری از همه پیچیدگی هایی که در حین کار با وب پک احساس کردم.
اگر دقیقاً مانند من هستید، یعنی احساس می‌کنید که راه‌اندازی بسته وب از ابتدا با Babel، SASS، Vue یا TypeScript می‌تواند بسیار گیج‌کننده باشد، پس این راهنما برای شما مناسب است!
در این راهنما، یاد خواهید گرفت که چگونه با استفاده از Webpack یک محیط فرانت اند بسازید و مانند همه چیزهای زندگی، لحظه ای که به خود فرصت یادگیری و درک کامل یک مفهوم را بدهید، متوجه خواهید شد که خیلی ترسناک نیست. گذشته از همه اینها.
با تعداد زیادی قطعات متحرک در آن، ما مفاهیم اساسی مختلفی را یاد خواهیم گرفت تا شما را با پک وب آشنا کنیم و یک صفحه دیگ پک وب بسازیم تا به شما کمک کند هنگام راه‌اندازی هر پروژه از ابتدا با بسته‌کننده ماژول بسیار محبوب، راه‌اندازی و اجرا کنید.
وب پک چیست؟
صرف نظر از اینکه بسته وب تا چه حد ممکن است پیچیده باشد، هدف اصلی آن بسیار ساده است. این یک دسته از دارایی های مختلف، فایل های مختلف – از انواع مختلف را می گیرد. جاوا اسکریپت، تصاویر، SASS، PostCSS، هر فایلی که ممکن است باشد، و آنها را به طور کلی ترکیب می کند (آنها را در یک گروه کوچکتر از فایل ها، شاید یک فایل، یا می تواند یک فایل برای جاوا اسکریپت، یک فایل برای شیوه نامه ها، یک فایل باشد) برای جاوا اسکریپت شخص ثالث و یکی برای فایل جاوا اسکریپت فهرست.
این بسیار قابل تنظیم است، و اینجاست که برای افرادی که تازه با آن آشنا هستند کمی خسته کننده است، با این حال، ایده پشت آن بسیار ساده است. علاوه بر اینکه فقط چیزها را با هم ترکیب می کند، وابستگی های یک برنامه را نیز مدیریت می کند، بنابراین، مطمئن می شود که کدهایی که باید ابتدا بارگیری شوند – ابتدا بارگیری می شوند، به همین ترتیب، اگر برای مثال، فایلی بنویسید که بستگی دارد روی دو فایل دیگر، یعنی آن دو فایل دیگر باید ابتدا بارگذاری شوند.
همانطور که در GitHub رسمی page:
یک بسته‌بندی برای جاوا اسکریپت و دوستان. بسیاری از ماژول‌ها را در چند دارایی بسته‌بندی می‌کند. تقسیم کد اجازه بارگیری بخش‌هایی از برنامه را می‌دهد. روی تقاضا از طریق “لودرها”، ماژول‌ها می‌توانند ماژول‌های CommonJs، AMD، ES6، CSS، Images، JSON، Coffeescript، LESS، … و موارد سفارشی شما باشند.”
Webpack چیزهای زیادی وجود دارد، و در این مرحله از این راهنما، ما در شرف آشنایی با مفاهیم اصلی Webpack هستیم.
راه اندازی پروژه
در پوشه دلخواه خود برای این آموزش، یک پوشه جدید ایجاد کنید: webpack-app، برای مسکن پروژه وب پک.
$ mkdir webpack-app
سپس، اجازه دهید Node.js را در پوشه پروژه با اجرای دستورات زیر در پوشه پروژه مقداردهی کنیم terminal، از دایرکتوری پروژه:
$ cd webpack-app
$ npm init --yes
این یک ایجاد خواهد کرد package.json فایلی که ردیابی وابستگی های برنامه را ممکن و آسان می کند.
اکنون که Node در پروژه ما مقداردهی اولیه شده است، می توانیم بسته های مختلفی را که نیاز داریم شروع کنیم. برای ادامه، اجازه دهید بسته های اصلی را نصب کنیم: webpack و webpack-cli.
$ yarn add --dev webpack webpack-cli
# Or
$ npm install --save-dev webpack webpack-cli
را webpack بسته به ما امکان می دهد ماژول های جاوا اسکریپت همراه را برای استفاده در مرورگر تولید کنیم، در حالی که webpack-cli ابزاری است که مجموعه ای از دستورات را ارائه می دهد که راه اندازی سریع یک پروژه وب پک سفارشی را برای توسعه دهندگان آسان می کند.
برای شروع، اجازه دهید دو پوشه جدید در آن ایجاد کنیم root فهرست راهنما src و dist. در src پوشه، ایجاد کنید index.js فایلی که به عنوان root فایل برای درخواست ما
توجه داشته باشید: خارج از جعبه، وب پک به فایل پیکربندی نیاز ندارد. به طور خودکار فرض می کند که نقطه ورود یک پروژه همان است src/index.js و یک نتیجه کوچک و بهینه را برای تولید در تولید خواهد داشت dst/main.js فایل.
پیکربندی پروژه
بعد، در root از فهرست پروژه ما، اجازه دهید فایل پیکربندی را تنظیم کنیم webpack.config.js برای تعریف اینکه چگونه بسته بندی باید در پروژه شکل بگیرد:
$ touch webpack.config.js
حالت
حالت محیطی را که پروژه در حال حاضر در آن کار می کند، تعریف می کند. ویژگی آن دارای پیش فرض است none، اما می توان روی هر کدام تنظیم کرد production یا development، اما شما هرگز در واقع استفاده نمی کنید none به عنوان یک حالت در واقع، زمانی که حالت تنظیم نشده باقی می‌ماند، وب‌پک از چه اتفاقی می‌افتد production به عنوان یک گزینه بازگشتی برای بهینه سازی.
با development به عنوان حالت تنظیم شده است، ما به راحتی از نگاشت منبع برای تشخیص خطاها استفاده می کنیم و می دانیم فایل های اصلی کجا هستند.
با production به عنوان حالت تنظیم کنید، اولویت کوچک کردن، بهینه سازی و کوچک کردن فایل ها است:
const path = require("path");
module.exports = {
mode: "development", // It can also be production
};
ورود
پیکربندی دیگری که باید تنظیم شود، شی ورودی است. این مشخص می کند که ما می خواهیم بسته وب ما از چه فایلی شروع به ساخت بسته نرم افزاری ما کند. اگر یک برنامه یک صفحه است، باید یک نقطه ورودی داشته باشد، در حالی که اگر یک برنامه چند صفحه است، باید چندین نقطه ورودی داشته باشد.
البته، در یک برنامه تک صفحه ای، این فایل جاوا اسکریپت شاخص داخل آن خواهد بود src پوشه، و در مورد ما، آن است src/index.js فایل:
const path = require("path");
module.exports = {
/* ... */
entry: {
main: path.resolve(__dirname, "src/index.js"),
},
};
خروجی
در نهایت، برای شروع، ما همچنین به یک خروجی نیاز خواهیم داشت تا مشخص کنیم که کجا می‌خواهیم فایل‌ها، دارایی‌ها، بسته‌ها و سایر منابع برنامه را پس از تکمیل فرآیندهای بسته‌بندی برنامه، خروجی بگیریم. در مورد ما، ما تنظیم می کنیم path برای اینکه خروجی باشد dist پوشه، اما در صورت تمایل می توانید نام آن را تغییر دهید deploy، build، یا هر نامی که شما ترجیح می دهید.
ما همچنین باید تنظیم کنیم filename برای تعریف نام بسته خروجی. یک قرارداد نام رایج است (name).bundle.js:
const path = require("path");
module.exports = {
/* ... */
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.bundle.js", // using static name
// OR
// using the entry name, sets the name to main, as specific in the entry object.
filename: "(name).bundle.js",
},
};
ما اکنون حداقل پیکربندی مورد نیاز برای بسته‌بندی یک برنامه را تنظیم کرده‌ایم که بتوانیم آن را اجرا کنیم package.json
برای رسیدن به آن، باید شی اسکریپت از پیش تعریف شده را در آن به روز کنیم package.json. اجازه دهید یک دستور جدید به نام ایجاد کنیم build، که خواهد داشت webpack به عنوان ارزش آن با ذخیره این دستور، اکنون می توانیم وب پک را اجرا کنیم.
اما قبل از اینکه ما اجرا کنیم build اجازه دهید به سرعت چند خط کد جاوا اسکریپت را در دستور قرار دهیم src/index.js فایل:
// src/index.js
console.log("Hello world! My name is Uche Azubuko.");
در مرحله بعد webpack را با دستور زیر اجرا می کنیم terminal:
$ yarn build
## OR
$ npm run build
این خروجی:
$ webpack
asset main.bundle.js 1.24 KiB (emitted) (name: main)
./src/index.js 54 bytes (built) (code generated)
webpack 5.75.0 compiled successfully in 98 ms
Done in 0.94s.
اساسا، زمانی که ما اجرا می کنیم build فرمان، webpack فرمانی است که در زیر کاپوت اجرا می شود. تنظیمات پیکربندی که ما تعریف کردیم خوانده می شود و نقطه ورود، یعنی app.js همراه می شود، خوانده می شود، و به عنوان خروجی main.bundle.js در dist پوشه
اگر به ساختن نقاط مختلف ادامه دهیم، نام های مختلفی به دست می آید، اما اگر آن را تنظیم کنیم filename به (name).(contenthash).js، هر بار که بسته نرم افزاری ما تکمیل می شود، مطمئن هستیم که یک نام منحصر به فرد برای فایل کامپایل شده دریافت می کنیم.
اکنون، وقتی دوباره برنامه را می سازیم، یک نام منحصر به فرد برای فایلی که در خروجی قرار می گیرد، دریافت می کنیم dist پوشه، مانند main.96f31f8d4c5ec9be4552.js:
$ yarn build
# Or
$ npm run build
این خروجی:
$ webpack
asset main.96f31f8d4c5ec9be4552.js 1.24 KiB (emitted) (immutable) (name: main)
./src/index.js 54 bytes (built) (code generated)
webpack 5.75.0 compiled successfully in 88 ms
Done in 0.92s.
به این ترتیب، مرورگر می‌تواند منابع برنامه را در هر زمان ساخت حافظه پنهان کند، زیرا هر بار که برنامه ساخته می‌شود نام‌های منحصربه‌فردی وجود دارد (بیشتر شبیه مدیریت نسخه برای هر فایل ساخت).
این امکان را برای برنامه‌های کاربردی وب و وب‌سایت‌ها فراهم می‌کند که زمان بارگذاری سریع‌تر و ترافیک شبکه غیرضروری داشته باشند، با این حال، وقتی تغییراتی در محتوا ایجاد می‌شود، می‌تواند مشکلاتی را ایجاد کند، زیرا webpack اکنون نمی‌داند به کدام فایل نیاز است یا نیازی نیست.
بنابراین، بهترین کاری که می‌توان انجام داد، تمیز کردن آن است dist دایرکتوری هر بار که یک برنامه بسته بندی می شود process تکمیل می شود
تمیز کردن را می توان با تنظیم به دست آورد clean گزینه در output اعتراض به true، به طوری که webpack.config.js به روز می شود:
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: path.resolve(__dirname, "src/index.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "(name).(contenthash).js",
clean: true,
},
};
در حال حاضر، هر بار که ما اجرا می کنیم build فرمان، dist دایرکتوری ابتدا قبل از اینکه یک فایل جدید در آن منتشر شود پاک می شود.
پس این در مورد است entry و output; از کجا می توان فایل ها را برای بسته بندی دریافت کرد و فایل ها را پس از بسته بندی در کجا قرار داد.
دو گزینه اصلی دیگر با فایل پیکربندی وجود دارد که می‌توانیم آنها را شامل کنیم: loaders، و plugins.
پلاگین ها
برای مشاهده عملکرد پلاگین ها، از آن استفاده می کنیم HTMLWebpackPlugin که با نصب فایل های HTML امکان ایجاد پویا را فراهم می کند html-webpack-plugin بسته:
$ yarn add --dev html-webpack-plugin
# Or
$ npm install --save-dev html-webpack-plugin
سپس در بخش پلاگین های فایل کانفیگ، از قسمت عبور می کنیم title از فایل HTML ساخته شده و الف filename:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: {
main: path.resolve(__dirname, "src/index.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "(name).(contenthash).js",
clean: true,
},
plugins: (
new HtmlWebpackPlugin({
title: "Testing html file",
filename: "index.html",
}),
),
};
در حال حاضر، زمانی که ما اجرا می کنیم build دستور، یک فایل HTML در آن ایجاد می شود dist پوشه و در index.html فایل، متوجه خواهید شد که منحصر به فرد js فایلی که بسته شده بود به طور خودکار اضافه شده است:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing html file</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.b908ea8ce529b415a20a.js"></script></head>
<body>
</body>
</html>
اگر می خواهید یک الگو ایجاد کنید تا به عنوان خود استفاده کنید index.html page در dist پوشه، می توانید با پیوست کردن a به این هدف برسید template گزینه به plugins گزینه ای از فایل پیکربندی، سپس یک فایل الگو را در آن تعریف کنید src پوشه ای که مقدار آن خواهد بود template گزینه:
module.exports = {
/* ... */
plugins: (
new HtmlWebpackPlugin({
title: "Testing html file",
filename: "index.html",
template: path.resolve(__dirname, "src/template.html"),
}),
),
};
سپس در template.html فایل، ما می توانیم چند نشانه گذاری تعریف کنیم. نکته ای که باید به آن توجه داشت این است که این فایل قالب به تمام مواردی که ما در آن تعریف کرده ایم دسترسی دارد new HtmlWebpackPlugin شی، مانند title، filename، که ما می توانیم import داخل فایل:
// src/template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<header>
<h1>Template File of <%= htmlWebpackPlugin.options.title %></h1>
</header>
</body>
</html>
اکنون، وقتی دوباره برنامه خود را می سازیم، عنوان را در قسمت تولید شده دریافت می کنیم dist/index.html “تست فایل html” باشد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing html file</title>
<script defer src="main.b908ea8ce529b415a20a.js"></script></head>
<body>
<header>
<h1>Template File of Testing html file</h1>
</header>
</body>
</html>
لودرها
وب‌پک به‌طور پیش‌فرض جاوا اسکریپت و JSON (نشان‌گذاری شی جاوا اسکریپت) را می‌شناسد، اما نمی‌داند فایل تصویری چیست، یا فایل‌های HTML، CSS، SASS یا SVG، از جمله انواع دیگر فایل‌ها، چیست. نمی داند چگونه با آنها رفتار کند. به دلیل این چالش، لودرها وارد می شوند.
اگر فایل‌های HTML، CSV، SVG، CSS، SASS یا تصویر دارید، می‌توانید برای همه این انواع مختلف فایل‌ها بارگیری داشته باشید که به پوشه منبع نگاه می‌کنند، آنها را پیدا می‌کنند و سپس آنها را به ماژول‌هایی تبدیل می‌کنند که می‌توانند وارد شوند. توسط جاوا اسکریپت
اجازه دهید با پیوست کردن این فایل SVG به یک مثال معمولی src پوشه و یک فایل CSS نیز. اگر بخواهیم آن را وارد کنیم و آن را به خوبی بسته بندی کنیم، از یک لودر استفاده می کنیم index.js فایل، دو کار باید در اینجا انجام شود. را index.js فایل به عنوان یک لودر برای بارگیری نوع فایل عمل می کند، سپس این لودر به فایل وارد می شود dist دایرکتوری زمانی که برنامه همراه است، به طوری که بخشی از نمودار وابستگی برنامه می شود.
بارگیری فایل های CSS با Webpack
ما می توانیم یک ایجاد کنیم main.css در src پوشه:
// src/main.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
سپس آپدیت کنید index.js:
// src/index.js
import style from "./main.css";
console.log("Hello world! My name is Uche Azubuko!");
در loaders گزینه ای در فایل پیکربندی، اکنون می توانیم قوانینی را برای بارگیری انواع مختلف فایل ها به عنوان ماژول در حین بسته بندی تنظیم کنیم. process:
module.exports = {
/* ... */
module: {
rules: ({ test: /\.css$/, use: ("style-loader", "css-loader") }),
},
};
در اینجا، ما یک قانون ایجاد کرده‌ایم که آرایه‌ای از لودرها را برای بارگذاری هر فایل CSS در آن فراهم می‌کند src پوشه؛ از راست به چپ خوانده می شود CSS-loader به دنبال فایل می گردد، آن را به یک ماژول تبدیل می کند و به جاوا اسکریپت می دهد، در حالی که style-loader ماژول وارد شده را می گیرد و به داخل آن تزریق می کند dist/index.html فایل.
آنها وابستگی های توسعه دهنده هستند، بنابراین، ما باید آنها را نیز در برنامه نصب کنیم:
$ yarn add --dev style-loader css-loader
# Or
$ npm install --save-dev style-loader css-loader
وقتی ما اجرا می کنیم build دستور، فایل جاوا اسکریپت حاصل از بسته بندی process اکنون فایل CSS را می داند و آن را به فایل تزریق می کند dist برنامه
فرض کنید می خواهید نسخه توسعه برنامه خود را راه اندازی کنید روی مرورگر ابتدا گزینه دیگری را به آن اضافه می کنیم scripts شی در package.json فایل:
"dev": webpack serve
دستور serve به همراه اضافه می شود webpack. همه چیز را کامپایل می کند و در حافظه نگه می دارد. در فایل کانفیگ، دو گزینه را اضافه می کنیم: devtool و devServer. اینها گزینه هایی هستند که به کارکردن کمک می کنند روی بهینه سرور
Devtools
را devtool گزینه config روش و اینکه آیا نقشه های منبع در طول کامپایل تولید می شوند را کنترل می کند. Source نقشه برداری از جایی که تمام محتوا از کجا آمده است را پیگیری می کند و به مرورگر می فهماند که خطای احتمالی از کجا می آید:
module.exports = {
/* ... */
devtool: "inline-source-map",
};
DevServer
این تنظیمات را برای سروری که در حال راه‌اندازی می‌کنیم مشخص می‌کند، و ما تعیین می‌کنیم که پایه برنامه از کجا اجرا شود. ما همچنین بارگذاری مجدد ماژول داغ (HMR) را با استفاده از آن تعریف می کنیم hot گزینه، شماره پورتی را که برنامه در آن اجرا می شود تنظیم کنید، با استفاده از آن مراقب تغییرات باشید watchFiles با تنظیم مقدار آن بر روی src پوشه، از open گزینه ای برای باز کردن سریع مرورگر هنگام کامپایل process برای راه اندازی نسخه توسعه کامل شده است و شماره پورت مورد نظر خود را با استفاده از آن تنظیم کنید port گزینه:
module.exports = {
/* ... */
devServer: {
contentBase: path.resolve(__dirname, "dist"),
port: 5001, // default is often 8080
open: true,
hot: true,
watchFiles: (path.resolve(__dirname, 'src')),
},
};
علاوه بر تعریف شده devServer گزینه، ما همچنین نیاز به نصب webpack-dev-server بسته به عنوان یک وابستگی توسعه دهنده، که کمک می کند.
حالا وقتی ما اجرا می کنیم dev دستور، برنامه ارائه می شود روی مرورگر در localhost:5001، نمایش تمام محتوایی که به آن تزریق شده است dist/index.html در طول بسته بندی process:
با فعال بودن جایگزینی ماژول داغ، اگر در طول توسعه تغییری ایجاد کنید، بلافاصله منعکس می شود روی مرورگر وقتی تغییرات را ذخیره می کنید.
در حال بارگذاری تصاویر
یکی دیگر از مواردی که در نسخه 5 وب پک ساده تر شده است، داخلی است asset/resource لودر، که می توانیم برای بررسی تصاویر به منظور تزریق آنها به برنامه در حین بسته بندی استفاده کنیم process:
module.exports = {
/* ... */
module: {
/* ... */
{ test: /\.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: "asset/resource" },
},
};
در اینجا، ما چکی نوشته ایم تا تمام فایل هایی که با نوع فایل زیر مرتبط هستند را پیدا کرده و آنها را به فایل تزریق کنیم dist پوشه در حین بسته بندی: svg، ico، png، webp، jpg، gif، jpeg.
به روز رسانی src/index.html برای اضافه کردن فایل SVG که قبلا دانلود کرده اید:
// src/index.js
import style from "./main.css";
import logo from "./logo.svg";
console.log("Hello world! My name is Uche Azubuko!");
حالا، اجرا کنید dev دستور، و فایل SVG اکنون باید کامپایل شده و بسته بندی شود process باید موفق باشد
به طور معمول، ما می خواهیم از SVG در یک فایل کامپوننت استفاده کنیم. برای آن، اجازه دهید یک را ایجاد کنیم component.js فایل در src پوشه در آنجا، ما یک ماژول ایجاد می کنیم که از آن برای ایجاد محتوا استفاده می کند روی را page:
// src/component.js
import logo from "./logo.svg";
function component() {
let main = document.createElement("main");
let para = document.createElement("p");
let img = document.createElement("img");
main.append(para);
para.append(img);
img.src = logo;
img.alt = "logo for the app";
return main;
}
export default component;
برای اینکه ما از تصویر استفاده کنیم، اولین قدم این خواهد بود import آن را در فایل سپس ما نیز نیاز داریم import را component.js فایل در index.js به طوری که بتوان آن را همراه و رندر کرد روی DOM. کامپوننت تابعی است که فراخوانی می شود و عبارت را برمی گرداند main عنصری که در component.js فایل، و سپس به بدنه DOM تزریق می شود:
// src/index.js
import style from "./main.css";
import logo from "./logo.svg";
import component from "./component";
console.log("Hello world! My name is Uche Azubuko!");
document.body.append(component());
حالا، وقتی دوباره سرور توسعه دهنده را اجرا می کنیم، باید فایل SVG را در حال حاضر رندر کنیم روی DOM:
اگر بخواهیم تصاویر همراه ما پس از تکمیل بسته بندی نام اصلی خود را حفظ کنند، در webpack.config.js، می توانیم تنظیم کنیم assetModuleFilename بودن "(name)(ext)" در output گزینه:
output: {
path: path.resolve(__dirname, "dist"),
filename: "(name).(contenthash).js",
clean: true,
assetModuleFilename: "(name)(ext)",
},
اکنون، وقتی سرور توسعه را راه اندازی مجدد می کنیم، نام تصویر باید همان چیزی باشد که قبل از بسته بندی بود.
ترانسپیلینگ
اغلب ایده خوبی است که کد خود را به نسخه‌های قدیمی‌تر ES5 منتقل کنید تا مرورگرهای قدیمی‌تر و همچنین مرورگرهای جدیدتر که از ES6 و ES7 استفاده می‌کنند، بتوانند کد شما را درک کنند. برای رسیدن به آن، از ابزار Babel استفاده می کنیم.
اکنون، قانونی را اضافه می‌کنیم که به دنبال همه فایل‌های جاوا اسکریپت می‌گردد src پوشه به استثنای node_modules پوشه، سپس آنها را با استفاده از babel-loader که استفاده می کند @babel/core و به عنوان یک وابستگی توسعه دهنده، همراه با تنظیم نصب می شود presets گزینه هایی برای @babel/preset-env.
ابتدا اجازه دهید بسته های مورد نیاز را نصب کنیم:
$ yarn add --dev babel-loader @babel/core @babel/preset-env
# Or
$ npm install --save-dev babel-loader @babel/core @babel/preset-env
module.exports = {
/* ... */
module: {
/* ... */
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ("@babel/preset-env") },
},
},
},
};
فایل را ذخیره کنید، سپس سرور توسعه را دوباره اجرا کنید. این بار، برنامه ما اکنون از مرورگرهای قدیمی‌تری که از ماژول‌های ES5 استفاده می‌کنند پشتیبانی می‌کند و اکنون سازگارتر با نسخه قبلی است.
نتیجه
هدف از این راهنما این بود که شما را به روش عملکرد زیر کاپوت راهنمایی کند. روش ساخت ماژول های جاوا اسکریپت برای پشتیبانی از مرورگرهای متقابل، روش ترانسپایل کردن با Babel، ایجاد نقشه های منبع، و ایجاد محیط ظاهری خود به همان اندازه که دوست دارید ساده و پیشرفته باشد.
حتی اگر از ابزارهایی مانند vue-create برای راه اندازی یک پروژه Vue یا create-react-app برای راه اندازی یک برنامه React، حقیقت این است که آنها از وب پک در پشت صحنه استفاده می کنند.
درک Webpack واقعاً چندان سخت نیست، و از این راهنما، برای شما عالی است که یادگیری خود را گسترش دهید تا روش کار با SASS، PostCSS در بسته وب و بهینه سازی تولید را مشاهده کنید. اگر به نظر شما چالش برانگیز است، با من تماس بگیرید، خوشحال می شوم کمک کنم.
یک بار دیگر، می‌توانید از پروژه‌ای که در این راهنما ساخته‌ایم، به‌عنوان یک دیگ بخار برای برنامه‌هایی که ممکن است بخواهید با استفاده از وب‌پک ساده بسازید، استفاده کنید، و به راحتی می‌توانید هر چیز دیگری را که دوست دارید تنظیم کنید.
می توانید به تمام کدهای منبع استفاده شده در این راهنما مراجعه کنید روی GitHub.
منابع اضافی
منتشر شده در 1403-01-05 06:39:04
