وب پک چیست و چگونه آن را نصب کنیم + فیلم آموزشی
امروزه ابزارهای زیادی در دنیای کدنویسی وجود دارد که لازم است با برخی از آن‌ها آشنا باشیم تا بتوانیم سرعت و سادگی کارمان را بالا ببریم. البته گاهی اوقات این ابزارها، پیچیدگی کدنویسی را بیشتر می‌کنند. از این رو، باید زمان کافی بگذاریم و آن‌ها به صورت فنی یاد بگیریم تا بتوانیم به درستی ازشان استفاده کنیم. وب پک نیز از این دسته ابزارهاست. در این مقاله با ما همراه باشید تا بررسی کنیم که وب پک چیست و درباره مفاهیم مربوط به آن صحبت کنیم. قبل از اینکه به سراغ ادامه مقاله برویم مایلم مجموعه آموزش طراحی سایت فرادرس را به شما معرفی کنم؛ برای دریافت این آموزش روی لینک زیر کلیک کنید:
وب پک چیست؟
اگر بار اول است که با وب پک کار می‌کنید، بی‌شک درک نحوه عملکرد و چگونگی کار با آن، برایتان دشوار خواهد بود. اما این که زمان بگذارید تا ببینید وب پک چیست قطعاً ارزشش را دارد چون به شما کمک می‌کند در بلند مدت، در زمان صرفه‌جویی کنید و با تلاش و زحمت کمتری، برنامه‌ها را اجرا کنید.
وب پک، یک باندلر ماژول ایستا است. وب پک، همه فایل‌های یک پروژه را به عنوان ماژول در نظر می‌گیرد و طبق نمودار وابستگی کار می‌کند. نمودار وابستگی نشان می‌دهد چطور ماژول‌ها با هم در ارتباط هستند. وب پک، همه ماژول‌ها را از نظر آماری بررسی می‌کند تا یک گراف بسازد و از آن گراف برای ساخت یک یا چندین باندل استفاده می‌کند. باندل، یک فایل جاوا اسکریپت است که کد همه ماژول‌ها را به ترتیب درست در خود جای داده است.
وب پک برای حل چه مشکلی ارائه شده است؟
کارکنان حوزه تکنولوژی همواره در تلاش هستند که تجربه کاربری توسعه‌دهندگان و برنامه‌نویسان javascript/web را بهتر کنند. از این رو، تعداد کتابخانه‌ها و فریم‌ورک‌ها روز به روز بیشتر می‌شود. حتی الگوهای طراحی جدیدی ارائه شده که کاربران بتوانند اپلیکیشن‌های جاوا اسکریپت قدرتمند را به سادگی هرچه تمامتر بنویسند. وب سایت‌های قدیمی، فقط یک پکیج کوچک حاوی تعدادی فایل بودند. اما رفته رفته با معرفی ماژول‌های جاوا اسکریپت، حجم پکیج‌ها بیشتر شد. دیگر نه تنها اندازه اپلیکیشن، مشکل‌ساز شد، بلکه بین آنچه برنامه‌نویسان می‌نوشتند و آنچه مرورگرها می‌فهمیدند، یک شکاف به وجود آمد. توسعه‌دهندگان باید از یک کد به نام polyfills استفاده می‌کردند تا مطمئن شوند مرورگرها می‌توانند کد وب سایت را تفسیر کنند. وب پک برای حل این مشکل مهم پدید آمد.
راه حل وب پک چیست؟ به طور خلاصه، وب پک در پکیج شما، یک نمودار وابستگی تولید می‌کند که شامل چندین ماژول است که اپلیکیشن وب شما برای اجرای درست به آن‌ها نیاز دارد. سپس، بسته به این نمودار، یک پکیج جدید تولید می‌کند که شامل حداقل تعداد فایل‌های لازم است و اغلب فقط یک فایل bundle.js را تولید می‌کند که میتوان آن را به آسانی به یک فایل html وصل کرد.
وقتی یک اپلیکیشن جاوا اسکریپت می‌سازید، کد جاوا اسکریپت، با فایل‌ها از هم جدا می‌شوند (این فایل‌ها ممکن است ماژول باشند یا نباشند). سپس باید در فایل index.html، تگ‌های <script> را اضافه کنید. این اضافه کردن تگ، نه تنها خسته‌کننده است، بلکه امکان به وجود آمدن خطا را افزایش می‌دهد. مثلاً اگر یک اسکریپت وابسته به React را قبل از بارگذاری اسکریپت React، باز کنید، همه برنامه‌ها به هم می‌ریزد. در این جا فایده وب پک چیست؟ وب پک به طور هوشمندانه یک باندل به وجود می‌آورد که به لطف آن، دیگر از بابت فراموشی <script> نگرانی نخواهید داشت.
باندل ماژول، فقط یکی از بخش‌های وب پک است. در صورت نیاز می‌توانید پیش از اضافه کردن ماژول‌ها به باندل، تغییراتی که می‌خواهید را رویشان اعمال کنید. مثلاً ممکن است بخواهید SASS/LESS را به CSS یا modern JavaScript را به ES5 تبدیل کنید.
حالا که دیدیم وب پک چیست و چه مشکلاتی را برطرف می‌کند، وقت آن رسیده درباره مفاهیم آن صحبت کنیم.
مفاهیم اصلی وب پک چیست
وب پک چندین مفهوم دارد که باید آن‌ها را یاد بگیریم.
Entry
وقتی اپلیکیشن شما از ماژول تشکیل شده باشد، همیشه یک تک ماژولی وجود داد که نقطه آغاز است. نقطه Entry، ماژولی است که وب پک از آن برای شروع ساخت نمودار وابستگی داخلی استفاده می‌کند. از این جا مشخص می‌شود که نقطه آغاز، به کدام ماژول‌ها و کتابخانه‌ها وابسته است (مستقیم و غیرمستقیم) و این وابستگی‌ها را به نمودار اضافه می‌کند. خاصیت entry به صورت پیش‌فرض، ./src/index.js تنظیم شده است؛ اما میتوانیم ماژول(های) دیگری را نیز در فایل پیکربندی وب پک داشته باشیم.
Output
خاصیت output، وب پک را راهنمایی می‌کند که باندل‌ها را در کجا بگذارد و از چه نامی برای فایل‌ها استفاده کند. مقدار پیش‌فرض این خاصیت برای باندل اصلی، ./dist/main.js و برای سایر فایل‌های تولیدی (مثل تصاویر)، ./dist است. البته میتوانیم بسته به نیاز خود، از مقادیر مختلفی استفاده کنیم.
Loaders
وب پک به طور پیش‌فرض فقط فایل‌های JavaScript و JSON را درک می‌کند. وب پک، برای پردازش انواع دیگر فایل و تبدیل آن‌ها به ماژول‌های معتبر، از loaderها استفاده می‌کند. Loaders، کد منبع ماژول‌های غیر جاوا اسکریپت را تبدیل می‌کند و به ما اجازه می‌دهد قبل از این که آن فایل‌ها به نمودار وابستگی اضافه شوند، آن‌ها را پردازش کنیم. مثلاً می‌تواند فایل‌های زبان CoffeeScript را به JavaScript یا تصاویر اینلاین را به URL داده تبدیل کند. با loaders حتی میتوانیم فایل‌های CSS را مستقیماً از ماژول‌های JavaScript باز کنیم.
Plugins
پلاگین‌ها برای کاربردهایی مورد استفاده قرار می‌گیرند که loaders از پسش برنمی‌آید. با پلاگین‌ها می‌توانید اشیا را مدیریت کنید، باندل را بهینه کنید و غیره. فایده پلاگین برای وب پک چیست؟ کامپایلر وب پک با استفاده از پلاگین می‌تواند وظایف را روی قطعات تولید شده توسط ماژول‌های باندل شده اجرا کند. هرچند که وب پک، برای اجرای وظایف طراحی نشده، اما با پلاگین‌ها میتوانیم عملیات‌هایی انجام دهیم که loaderها نمی‌توانستند هنگام باندل شدن کد انجام دهند.
دو نوع پلاگین وجود دارد که بسیار کاربردی هستند. اولی Offline-plugin است که می‌توانید به کمک آن، پروژه‌های وب پک را به صورت آفلاین مدیریت کنید. پلاگین دوم، Purgecss-webpack-plugin است که برای بهینه‌سازی وب پک کاربرد دارد، چون CSS استفاده نشده در اپلیکیشن را در طول کامپایل، حذف می‌کند.
Mode
به طور معمول وقتی نرم‌افزاری را توسعه می‌دهیم، با دو نوع کد منبع کار می‌کنیم: یکی برای توسعه‌ها و دیگری برای تولید. با تغییر mode میتوانیم مشخص کنیم چه نوع منبعی را می‌خواهیم. به این صورت، وب پک می‌تواند طبق محیط مورد نظر، از بهینه‌سازی‌های مناسب استفاده کند. البته می‌توانید هیچ حالتی را انتخاب نکنید، که در این صورت، وب پک از گزینه‌های بهینه‌سازی پیش‌فرض استفاده می‌کند.
طریقه نصب وب پک
اگر تا به حال با reactJS کار کرده باشید، احتمالاً می‌دانید که create-react-app چیست. ReactJS، یک کتابخانه UI است که برای ساخت UIهای پیچیده و هوشمند، بسیار کاربردی است. create-react-app نیز یک ابزار CLI برای تنظیم و راه‌اندازی boilerplate dev برای ساخت اپلیکیشن‌های React است.
npm int:
تقریباً همه چیزهای خوب، با npm init ساده شروع می‌شوند. ما در این جا از Visual Studio Code استفاده می‌کنیم، اما شما می‌توانید از هر ویرایشگر کدی که می‌خواهید استفاده کنید.
قبل از شروع هر کاری مطمئن شوید آخرین نسخه nodeJS و npm روی سیستمتان نصب باشد.
$ npm init
با این کد، پکیج شما ایجاد می‌شود و یک فایل package.json اضافه می‌شود. در این جا همه وابستگی‌ها برای ساخت اپلیکیشن ذکر می‌گردد.
الان برای ساخت یک اپلیکیشن React ساده، به دو کتابخانه اصلی نیاز داریم: React و ReactDOM. پس این‌ها را به عنوان وابستگی، با استفاده از npm به اپلیکیشن اضافه می‌کنیم.
$ npm i react react-dom –save
در مرحله بعد باید وب پک را اضافه کنیم تا بتوانیم اپلیکیشن را باندل و دسته‌بندی کنیم.
$ npm i webpack webpack-dev-server webpack-cli –save–dev
–save–dev برای مشخص کردن این است که این ماژول‌ها فقط وابستگی‌های dev هستند. چون با React کار می‌کنیم، باید در نظر داشته باشیم که React از کلاس‌های ES6 استفاده می‌کند و ممکن است کد آن، برای همه مرورگرها، خوانا نباشد. برای اطمینان از خوانا بودن کد، به ابزاری مثل babel نیاز داریم.
$ npm i babel-core babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin –save-dev
الان وقت آن رسیده که چند کد را اضافه نموده و پیکربندی وب پک را شروع کنیم.
کد وب پک
با اضافه کردن فایل webpack.config.js به ریشه ساختار اپلیکیشن، کار را شروع می‌کنیم. کد زیر را به فایل webpack.config خود اضافه کنید.
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
//این خاصیت، محل شروع شدن اپلیکیشن را تعریف می‌کند
entry:’./src/index.js’,
//این خاصیت، مسیر فایل و نام فایلی که برای فایل باندل شده استفاده می‌شود را تعریف می‌کند
output:{
path: path.join(__dirname, ‘/dist’),
filename: ‘bundle.js’
},
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’
}
}
]
},
//نصب پلاگین برای استفاده از فایل اچ تی ام ال برای فایل‌های جاوا اسکریپت باندل شده
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’
})
]
}
حالا ببینیم معنای خطوط بالا برای ساخت وب پک چیست؟
در ابتدا، به ماژول مسیر پیش‌فرض نیاز داریم تا به مکان فایل دسترسی پیدا کنیم و مکان فایل را تغییر دهیم.
سپس به HTMLWebpackPlugin نیاز داریم تا یک فایل HTML بسازیم تا برای فایل(های) جاوا اسکریپت باندل شده به ما کمک کند.
پس از آن، شی export.module را داریم که چند خصوصیت دارد. خصوصیت اول، entry است.
module.exports = {
entry:’./src/index.js’
}
خاصیت بعدی، output است که مشخص می‌کند فایل باندل شده باید در کجا تولید شود و نام این فایل چه باشد. این کار با output.path و output.filename انجام می‌شود.
module.exports = {
output:{
path: path.join(__dirname, ‘/dist’),
filename: ‘bundle.js’
},
}
الان باید loaders را تعریف کرد. قبلا درباره این که نقش loaders در عملکرد وب پک چیست صحبت کرده بودیم. پس اگر پروژه شما از زبانی غیر از JavaScript و JSON استفاده می‌کند، در این جا باید مشخص کنید.
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’
}
}
]
}
}
اطلاعات باید برای هر شی از ماژول مشخص باشد.
مرحله بعد، خاصیت پلاگین است. از پلاگین برای گسترش قابلیت‌های وب پک استفاده می‌شود.
module.exports = {
// نصب پلاگین برای استفاده از فایل اچ تی ام ال برای فایل‌های جاوا اسکریپت باندل شده
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’
})
]
}
این پلاگین، از فایلی مشخص در پوشه src ما استفاده خواهد کرد. سپس، از آن، به عنوان یک قالب برای فایل HTML استفاده خواهد کرد. پلاگین‌های زیادی وجود دارد که میتوانیم از آن‌ها بهره ببریم.
آخرین کاری که باید انجام دهیم، ساخت فایل .babelrc است. با این فایل میتوانیم از babelای که نصب کرده‌ایم استفاده کنیم و خیالمان از بابت کلاس‌های ES6 راحت باشد. کدی که در ادامه آورده‌ایم، برای فایل .babelrc هستند.
{
“presets”: [“env”, “react”]
}
کد React
از آن جایی که نقطه شروع هر اپلیکیشنی، فایل index.js در پوشه src است، کار خود را از آن جا آغاز می‌کنیم. در این جا، به React و ReactDOM نیاز داریم. کد زیر را به فایل index.js خود اضافه کنید.
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./Components/App’;
ReactDOM.render(<App />, document.getElementById(‘app’));
پس یک فایل دیگر را از پوشه components باز می‌کنیم و فایل دیگری را به پوشه App.js اضافه می‌کنیم. بیایید ببینیم درون فایل App.js چه چیزی وجود دارد.
import React, { Component } from ‘react’
class App extends Component {
render() {
return (
<div>
<h1>Webpack + React setup</h1>
</div>
)
}
}
export default App;
کارمان تقریباً تمام شده است. تنها چیزی که باقی مانده، این است که hot reloading را فعال کنیم. با این کار، هر وقت تغییری شناسایی شود، مرورگر به صورت خودکار، صفحه را مجدداً بارگذاری می‌کند و این توانایی را دارد که کل اپلیکیشن را در زمان مناسب، بسازد و باندل کند.
میتوانیم این کار را با اضافه کردن اسکریپت به فایل package.json انجام دهیم. خاصیت تست را از شی اسکریپت فایل حذف کنید و این دو اسکریپ را اضافه کنید:
“start”: “webpack-dev-server –mode development –open –hot”,
“build”: “webpack –mode production”
الان به پوشه ریشه بروید و npm start را اجرا کنید. با این کار، سرور dev روی کامپیوتر شما شروع به کار می‌کند و به فایل HTML روی مرورگر، خدمت‌رسانی می‌کند. اگر تغییر جزئی/کلی انجام دهید و کد را ذخیره کنید، مرورگر شما به صورت خودکار، رفرش می‌شود تا آخرین تغییرات را نشان دهد.
کلام آخر در مورد وب پک چیست
در این مقاله، بررسی کردیم که وب پک چیست. ابتدا وب پک را تعریف نموده و درباره این صحبت کردیم که برای حل چه مشکلی به وجود آمده است. سپس مفاهیم این ابزار را تعریف کردیم. در نهایت نیز، نحوه استفاده از وب پک را توضیح دادیم. امیدواریم با جزئیاتی که در این مقاله ارائه دادیم، الان هم بدانید که وب پک چیست و هم نحوه کار با آن را یاد گرفته باشید. در پایان مایلم آموزش مقدماتی کتابخانه ReactJS فرادرس را به شما معرفی کنم؛ برای دریافت این آموزش روی لینک زیر کلیک کنید:
اگر برای خرید مودم، اینترنت و تجهیزات شبکه سوال داشتید یا نیاز به راهنمایی و کمک دارید؛ کانال تلگرام شبکه‌چی به آی‌دی shabakehchi@ را فالو و پرسش خود را برای مدیر کانال بفرستید تا جواب دهیم.
