تا %60 تخفیف خرید برای 5 نفر با صدور مدرک فقط تا
00 00 00

آموزش Webpack قسمت 1: Webpack چیست؟

حسین احمدی
حسین احمدی
0 پسند
186 بازدید
0 نظر
3 ماه قبل

ضمیمه ها

WebpackSample.rar

در طول یکسری مطب قصد داریم آموزش Webpack رو شروع کنیم. اما Webpack چیست؟ سوال اصلی که خیلی از دوستان در ابتدا از خودشون می پرسن و اینکه اصلاً چرا باید کار با Webpack رو یاد بگیریم؟ دنیای کامپیوتر و مخصوصاً دنیای برنامه نویسی دائم در حال به روز شدن هست و هر روز ابزارهای زیادی معرفی میشن. اگر کار شما طراحی و توسعه وب سایت هست و تا این لحظه با Webpack کار نکردید بدونید که یک نعمت بزرگ در زمینه طراحی و توسعه وب رو از دست دادید.

بحث مدیریت فایل های مورد استفاده در یک پروژه وب مثل فایل های جاوا اسکریپت، فایل های CSS، تصاویر، فونت ها و ... همیشه یک مشکل بوده. برای مثال، فرض کنید شما چند فایل Javascript در پروژتون دارید و هر کدوم از این فایل ها یکسری وابستگی ها به هم دارن، حالا ممکنه یکسری از این کدها در یک بخش از سایت شما مورد استفاده قرار بگیره و در بخش دیگه ای مورد استفاده نباشه. کاری که Webpack برای شما انجام میده مدیریت فایل ها و وابستگی اون ها، ایجاد فایل های Bundle شده و Minify شده و کلی کارهای جالب دیگه هست که قصد داریم با اون ها آشنا بشیم.

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

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

D:\>node -v
v14.4.0

بر اساس نسخه ای که نصب کردید، خروجی متفاوتی دریافت می کنید، در اینجا من از نسخه 14.4.0 استفاده می کنم.

برای ایجاد اولین پروژه یک پوشه با نام WebpackSample ایجاد کنید:

D:\>md WebpackSample

D:\>cd WebpackSample

D:\WebpackSample>

برای قدم بعدی، دستور زیر رو وارد کنید تا فایل package.json برای ما ایجاد بشه:

D:\WebpackSample>npm init -y
npm WARN npm npm does not support Node.js v14.4.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12, 13.
npm WARN npm You can find the latest version at https://nodejs.org/
Wrote to D:\WebpackSample\package.json:

{
  "name": "WebpackSample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

فایل ایجاد شده، تنظیماتی هست که به صورت خودکار توسط Nodejs ایجاد میشه و شامل یکسری اطلاعات مانند نام پروژه، نسخه و صفحه اصلی سایت ما هست. همچنین این فایل شامل Dependecy های پروژه ما (برای مثال، Webpack به عنوان یک Dependecy شناخته میشه، هر چیزی که پروژه ما برای اجرا بهش نیاز داره) و اسکریپت هایی که میشه بوسیله npm اونا رو اجرا کرد که جلوتر باهاشون آشنا میشیم.

برای این پروژه ما یک فایل ساده Javascript و یک فایل html ایجاد می کنیم که یک پیام ساده به کاربر نمایش میده. قبل از هر کاری Webpack رو بوسیله دستور زیر نصب می کنیم:

D:\WebpackSample>npm install webpack webpack-cli --save-dev

با اجرای دستور بالا Webpack به پروژه اضافه میشه و می تونیم ازش استفاده کنیم (اجرای دستور بالا در محیط ویندوز یا لینوکس تفاوتی نداره و فقط باید npm روی سیستم شما نصب باشه). گزینه های webpack و webpack-cli میگه که ما میخواییم webpack و امکانات webpack برای استفاده از محیط command رو نصب کنیم. سوئیچ --save-dev هم برای این هست که ما webpack رو فقط برای محیط Development میخواییم در محیط Production بهش نیازی نداریم. بعد از اجرای دستور بالا، اگر فایل package.json رو باز کنیم میبینیم که بخش devDependencies به این فایل اضافه شده و ساختار فایل به صورت زیر تغییر کرده:

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

داخل پوشه WebpackSample پوشه جدیدی ایجاد شده با نام node_modules که شامل dependency های پروژه ماست، یک پوشه با نام .bin هم وجود داره که اگر داخل این پشه رو نگاهی بندازیم مییبیم که فایلی با نام webpack.cmd ایجاد شده که ما برای استفاده از webpack این فایل رو اجرا می کنیم.

اگر شما از نسخه 3 و پایین تر webpack استفاده کرده باشید، می دونید که برای استفاده از webpack باید یک فایل config ایجاد می کردیم. اما در نسخه 4 نیازی به ایجاد فایل config نیست (البته برای ساده ترین حالت استفاده) که اصطلاحاً بهش Zero Config هم گفته میشه. بدون استفاده از فایل config یکسری پیش فرض ها وجود داره، مثل اینکه فایل اصلی js ما داخل پوشه ای با نام src و با نام index.js باید تعریف میشه و خروجی webpack در پوشه ای با نام dist و فایلی با نام main.js ایجاد میشه.

داخل پوشه WebpackSample یک پوشه با نام src ایجاد کنید و داخل پوشه src یک فایل با نام index.js:

D:\WebpackSample>md src

D:\WebpackSample>cd src

D:\WebpackSample\src>type nul > index.js

دستور آخر یک فایل خالی با نام index.js برای ما ایجاد می کند، محتویات فایل index.js رو به صورت زیر تغییر بدید:

alert('Hello Webpack! TOSINSO.COM');

داخل محیط command دستور زیر رو اجرا کنید:

D:\WebpackSample>node_modules\.bin\webpack
Hash: 0cd4cd3a207463b144c6
Version: webpack 4.43.0
Time: 288ms
Built at: 07/01/2020 11:49:55 AM
  Asset       Size  Chunks             Chunk Names
main.js  965 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 36 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

با اجرای این دستور پوشه ای با نام dist ایجاد شده و فایلی با نام main.js داخل آن ایجاد می شود. اگر دقت کنید من یک پیام هشدار دریافت کردم مبنی بر اینکه تنظیمات mode مشخص نشده و به خاطر همین فایل ما در حالت production ایجاد میشه. اگر بخواییم این پیام نمایش داده نشه دستور رو به صورت زیر تغییر میدیم:

D:\WebpackSample>node_modules\.bin\webpack --mode=production

با اجرای این دستور پیام warning حذف خواهد شد. اگر نگاهی به فایل main.js داخل پوشه dist بندازیم محتویاتش به صورت زیر هست:

آموزش Webpack

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

در انتها باید تست کنیم که فایل ایجاد شده ما به درستی کار میکنه، برای اینکار داخل پوشه WebpackSample یک فایل با نام index.html ایجاد کنید و محتویات فایل رو به صورت زیر تغییر بدید:

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
  <meta charset="utf-8">
  <title>Hello Webpack</title>
 </head>
 <body>
  <script type="text/javascript" src="dist/main.js"></script>
 </body>
</html>

با باز کردن این فایل در مرورگر پیام alert برای ما نمایش داده میشه:

آموزش Webpack

تبریک میگم، شما اولین برنامتون رو با کمک Webpack نوشتید، اما این تازه شروع ماجرا بود. کلی امکانات و قابلیت های جذاب دیگه هم هست که باید باهاش آشنا بشید. در قسمت های بعدی با این امکانات و قابلیت ها بیشتر آشنا میشیم.

کدهای این مطلب رو می تونید از بخش ضمیمه ها در ابتدای مطلب دانلود کنید

نویسنده: حسین احمدی
منبع: جزیره طراحی وب توسینسو
هر گونه نشر و کپی برداری با ذکر نام نویسنده و منبع بلامانع است

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...