وب پک چیست و چرا باید از آن استفاده کنیم (قسمت دوم)

خب جلسه قبلی مزایای وب پک رو با همدیگه دیدیم و یه اپ ساده نوشتیم و از وب پک توش استفاده کردیم.

وب پک چیست و چرا باید از آن استفاده کنیم ؟

ساختن فایل تنظیمات برای وب پک

گفتیم که وب پک کلی تنظیمات داره که میتونیم باهاش روی وب پک تسلط داشته باشیم و بهش بگیم دقیقا چجوری فایل ها رو برای ما باندل کنه. این جلسه قراره با همدیگه روی این تنظیمات یه نگاهی داشته باشیم.

برای شروع اول فایل های جلسه قبل رو روی سیستم کلون کنید

https://github.com/alikomijani/webpack-demo

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

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

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

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

خب حالا در خط فرمان دستور زیر رو وارد کنید.

$ npx webpack --config webpack.config.js

نکته به پارامتر آخر دقت کنید ما داریم با سوویچ config به وب پک میگیم که فایل تنظیمات تو اسمش چیه خب تو این مثال به این سوئیچ احتیاجی نداریم چون اسم پیشفرض فایل تنظیمات همین اسمی هست که الان روی فایل گذاشتیم ولی من خواستم این نکته رو آموزش بدم که اگه مثلا بخوایم چند نوع خروجی متفاوت بگیریم میتونیم چند تا فایل تنظیمات با اسم های مختلف بسازیم و براحتی به وب پک بگیم خروجی رو با کدوم تنظیمات و چطور بسازه.(قاعدتا حتی میتونید تو پوشه های مختلف خروجی بگیرید. مثلا یه نسخه مینیفای شده و یه نسخه غیره فشرده.)

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

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

نود برای این مسئله یه راه حل تدارک دیده که اونم npm scripts هست. برای اینکه اولین اسکریپت خودمون رو بنویسیم برید و فایل pakage.json رو باز کنید

{
   &quotname&quot: &quotwebpack-demo&quot,
   &quotversion&quot: &quot1.0.0&quot,
   &quotdescription&quot: &quot&quot,
   &quotprivate&quot: true,
   &quotscripts&quot: {
-    &quottest&quot: &quotecho \&quotError: no test specified\&quot && exit 1&quot
+    &quotbuild&quot: &quotwebpack&quot
   },
   &quotkeywords&quot: [],
   &quotauthor&quot: &quot&quot,
   &quotlicense&quot: &quotISC&quot,
   &quotdevDependencies&quot: {
     &quotwebpack&quot: &quot^5.4.0&quot,
     &quotwebpack-cli&quot: &quot^4.2.0&quot
   },
   &quotdependencies&quot: {
     &quotlodash&quot: &quot^4.17.20&quot
   }
 }

خطی که اول − داره رو پاک و خطی که + داره رو اضافه کنید(از این به بعد این قراردادمون هست) حالا کافیه تو خط فرمان دستور ٰ

$ npm run build

رو اجرا کنیم تا خروجی ساخته بشه.

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