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

آموزش Webpack قسمت 4: تنظیمات webpack و فایل config

ضمیمه ها

WebpackSample.rar

تا اینجا متوجه شدیم که webpack بدون نیاز به فایل configuration کار میکنه که اصطلاحاً بهش Zero Config میگن. مثل اینکه فایل پیش فرض برای پردازش index.js هست یا پوشه ای که فایل های خروجی تولید میشن dist نام داره و فایل خروجی هم main.js هست. بوسیله فایل config میشه تمامی این موارد رو تغییر داد و البته کارهای دیگه ای که در قسمت های بعدی باهاش آشنا میشیم. در این بخش با مفاهیم اولیه فایل configuration آشنا میشیم.

برای اعمال تنظیمات دلخواه در webpack باید فایلی با نام webpack.config.js ایجاد کنیم. در زمان build کردن به صورت پیش فرض webpack به دنبال فایلی با این نام میگردد. البته امکان تغییر نام این فایل وجود دارد. برای تغییر نام فایل در فایل package.json بخش script دستور build رو به صورت زیر تغییر میدیم (البته در صورتی که بخواهیم نام فایل config چیز دیگه ای غیر از نام پیش فرض باشه):

scripts: {
"build": "webpack --config my-config.js"
}

ما در اینجا از فایل پیش فرض استفاده می کنیم و به همین خاطر در پوشه WebpackSample فایلی با نام webpack.config.js ایجاد می کنیم و محتویات فایل رو به صورت زیر تغییر میدیم:

module.exports = {
 entry: "./src/index.js",
 output: {
  filename: "main.js"
 }
}

در فایل تنظیمات، بوسیله entry نام فایل اصلی و در بخش output نام فایل خروجی رو مشخص کردیم. حالا دستور زیر رو اجرا می کنیم:

npm run build

عملیات build مانند سابق برای ما اجرا شده و البته تغییری در خروجی مشاهده نمی کنیم، چون تنظیمات ما، همون تنظیمات پیش فرض webpack هست، در ادامه بخش filename رو به صورت زیر تغییر میدیم:

module.exports = {
 entry: "./src/index.js",
 output: {
  filename: "../build/application.js"
 }
}

در تنظیمات بالا، بخش filename گفتیم که یک پوشه از پوشه پیش فرض که dist هست به عقب برگرد و داخل پوشه ای با نام build فایل خروجی رو با نام application.js ایجاد کن، دستور زیر رو اجرا می کنیم:

npm run build

حالا اگه به پوشه WebpackSample مراجعه کنیم میبینیم که پوشه ای با نام build برای ایجاد شده و داخلش فایلی با نام application.js هست:

آموزش webpack

امکان جداکردن مسیر از فایل هم در تنظیمات بالا وجود داره، کافیه بخشی به نام path به قسمت output اضافه کنیم و مسیر رو از قسمت filename حذف کنیم:

module.exports = {
 entry: "./src/index.js",
 output: {
  filename: "application.js",
  path: "/path/folder/build"
 }
}

مسیری که مشخص می کنیم باید آدرس کامل باشه، یعنی این مسیر به صورت relative در نظر گرفته نمیشه. البته مشخص کردن مسیر به صورت کامل در فایل تنظیمات زیاد جالب نیست، برای اینکه داخل قسمت path بتونیم خروجی رو بر اساس پوشه پروژه مشخص کنیم از یک module به نام path استفاده می کنیم. در ابتدا دستور زیر رو برای نصب path اجرا می کنیم:

npm install path --save-dev

بعد از نصب این module فایل webpack.config.js رو باید تغییر بدیم، در ابتدای فایل خط زیر رو اضافه می کنیم:

const path = require('path');

بوسیله این کد امکان استفاده از ماژول path در فایل ما ایجاد میشه بوسیله یک ثابت به نام path. در ادامه بخش path رو به صورت زیر تغییر میدیم:

path: path.resolve(__dirname, 'build')

دستور path.resolve بوسیله متغیر __dirname و نام پوشه build مسیر نهایی رو برای ما ایجاد می کنه. فایل webpack.config.js به صورت باید بشه:

const path = require('path');

module.exports = {
 entry: "./src/index.js",
 output: {
  filename: "application.js",
  path: path.resolve(__dirname, 'build')
 }
}

پوشه های dist و build رو پاک می کنیم و مجدد دستور npm run build رو اجرا می کنیم تا فایل های خروجی برای ما ایجاد بشن. در نهایت هم فایل 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="build/application.js"></script>
 </body>
</html>

در ادامه مورد نحوه مشخص کردن حالت خروجی که production یا development هست رو توضیح میدیم. در فایل config بخشی به نام mode اضافه می کنیم:

const path = require('path');

module.exports = {
 mode: "development",
 entry: "./src/index.js",
 output: {
  filename: "application.js",
  path: path.resolve(__dirname, 'build')
 }
}

و در فایل package.json بخش scripts نیازی به سوئیچ --mode نداریم:

  "scripts": {
    "build": "webpack"
  },

در انتها اجرای دستور npm run build تا خروجی برای ما در حالت development ایجاد بشه.

آخرین موردی که در این بخش در موردش توضیح میدیم قابلیت watch هست، در صورت استفاده از قابلیت watch، با یک بار اجرای دستور build، بعد از هر تغییر در فایل های js خروجی به صورت خودکار برای ما ایجاد میشه و نیازی به اجرای مجدد دستور build نیست، کافیه فایل webpack.config.js رو به صورت زیر تغییر بدیم:

const path = require('path');

module.exports = {
 watch: true,
 mode: "development",
 entry: "./src/index.js",
 output: {
  filename: "application.js",
  path: path.resolve(__dirname, 'build')
 }
}

دستور npm run build رو اجرا می کنیم و فایل index.html رو داخل مرورگر باز میکنیم. پیام Hello Webpack! This is from greeting برای ما نمایش داده میشه. حالا در فایل greeting.js کد alert رو به صورت زیر تغییر میدیم:

function sayHello(){
 alert("Hello Webpack! This is from greeting. I'm watching you!");
}

export { sayHello };

بدون اجرای دستور npm run build فقط صفحه html رو رفرش می کنیم و میبینیم که متن alert تغییر کرده.

در این بخش با مفاهیم اولیه مربوط به تنظیمات webpack و فایل webpack.config.js آشنا شدیم. در بخش بعدی با Loader ها و Plugin ها آشنا میشیم.

فایل ضمیمه این قسمت را در ابتدای مطلب می توانید دریافت کنید

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

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

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

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند