درس یازدهم: سرور توسعه Webpack

در قسمت قبل در مورد تفاوت های بین development و production صحبت کردیم و به شما توضیح دادیم که می توانیم برای هر کدام از این حالت ها یک فایل جداگانه داشته باشیم. همچنین متوجه شدیم که چرا باید در حالت Development بسیاری از حالت های بهینه سازی و پلاگین ها را غیر فعال کنیم؛ در حالت توسعه نیاز به Debug است نه بهینه سازی بنابراین فشرده سازی کدها کار را سخت تر می کند. به علاوه اینکه فعال بودن پلاگین های مختلف باعث کند شدن روند دریافت خروجی می شود که دردسر ساز است. چرا؟ به دلیل اینکه در طول توسعه و کدنویسی شاید صد ها بار و با هر تغییر کوچک بخواهیم خروجی بگیریم و اگر هر بار 10 ثانیه بیشتر هم طول بکشد در نهایت ساعت ها زمان تلف کرده ایم.

در این جلسه در راستای همین مسئله می خواهیم با سرور مجازی webpack آشنا شویم. در حال حاضر هر بار که خروجی می گیریم باید به فایل index.html رفته و آن را درون مرورگر باز کنیم که فرآیند خسته کننده ای است. سرور مجازی webpack به ما کمک می کند که فرآیند مشاهده نتایج در مرورگر را بسیار سریع تر کنیم. قدم اول نصب این سرور مجازی است بنابراین یک پنجره ترمینال را باز کرده و دستور زیر را در آن نصب کنید:

npm install webpack-dev-server --save-dev

با اجرای این دستور، سرور توسعه webpack برای شما نصب می شود. پس از نصب آن به فایل webpack.dev.config.js بروید و در آن گزینه جدیدی به نام devServer را اضافه کنید:

// بقیه کدها //
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, './dist'),
        index: 'index.html',
        port: 9000
    },
    module: {
// بقیه کدها //

همانطور که می بینید خصوصیت devServer باید یک شیء جاوا اسکریپتی باشد که سه خصوصیت دیگر دارد. اولین خصوصیت contentBase است که به محل خروجی فایل های نهایی شما اشاره می کند (در این پروژه همان پوشه dist). نکته مهم اینجاست که باید آدرس این پوشه را به صورت absolute path بدهید بنابراین باز هم از nodejs استفاده کرده ایم و به شکلی که در کد بالا مشخص است، آدرس کامل را به contentBase داده ایم. خصوصیت بعدی index است که نام فایل اصلی برنامه شما را می گیرد. فایل اصلی برنامه من index.html است اما ممکن است پروژه های دیگر شما نام دیگری داشته باشند. تا به این قسمت تمام تمرکز ما روی برنامه SPA (تک صفحه ای) بوده است اما نگران نباشید بعدا در مورد برنامه های MPA نیز صحبت خواهیم کرد. در نهایت خصوصیت port را داریم که port مورد استفاده روی سیستم ما توسط سرور مجازی را مشخص می کند. شما می توانید هر port ای که خواستید را در این قسمت قرار بدهید اما من سعی می کنم از port های مشهور مانند 8080 دوری کنم چرا که ممکن است برنامه های دیگر در حال استفاده از آن باشند.

حالا باید به package.json برویم تا در قسمت scripts تغییر کوچکی اعمال کنیم. در حال حاضر دستور dev ما به شکل زیر است:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.config.js",
    "dev": "webpack --config webpack.dev.config.js"
  }

یعنی با اجرای دستور npm run dev خودِ Webpack اجرا شده و از فایل های ما خروجی می گیرد. این خروجی طبق معمول در پوشه Dist خواهد بود اما ما می خواهیم به جای webpack، سرور مجازی webpack اجرا شود تا تغییرات بدون گرفتن خروجی و مستقیما در مرورگر نمایش داده شوند. بنابراین کد قسمت dev را به شکل زیر تغییر دهید:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.config.js",
    "dev": "webpack-dev-server --config webpack.dev.config.js --hot"
  }

قسمت آخر این کد که hot-- است یکی از قابلیت های webpack است و به آنHot Module Replacement یا اختصارا HMR می گوییم. این قابلیت به Webpack اجازه می دهد که بدون reload کردن صفحه، module های جدید را اضافه یا حذف کند. همچنین تغییرات ایجاد شده در جاوا اسکریپت و CSS را مستقیما در مرورگر اعمال می کند. با این کار State برنامه نیز حفظ می شود و سرعت کار ما بسیار بالا می رود.

البته باید پلاگین HotModuleReplacementPlugin را نصب کنید تا از این قابلیت به صورت 100 درصد استفاده کنید. من این کار را نمی کنم چرا که اگر از hot-- استفاده کرده باشید، این پلاگین معمولا به صورت خودکار برایتان فعال می شود اما نحوه فعال سازی دستی آن را نیز برایتان توضیح می دهم. در ساده ترین حالت باید به فایل پیکربندی Webpack رفته و در قسمت plugins کد زیر را اضافه کنید:

new webpack.HotModuleReplacementPlugin({
  // Options...
});

در قسمتی که کامنت options را می بینید، می توانید option های این پلاگین را اضافه کنید که سه مورد هستند:

• multiStep: اگر آن را روی true بگذارید، فایل های نهایی شما در دو مرحله جداگانه ایجاد می شوند: ابتدا قسمت تغییرات کامپایل شده و در نهایت بقیه کدها کامپایل خواهند شد.
• fullBuildTimeout: اگر multiStep فعال باشد، این گزینه تعداد ثانیه های بین دو مرحله را مشخص می کند.
• requestTimeout: مقدار timeout ای که برای دانلود نیاز است را بر حسب ثانیه مشخص می کنید.

البته وب سایت webpack می گوید که در اکثر مواقع نیازی به پاس دادن هیچ کدام از این option ها نیست و فقط نوشتن دستور new webpack.HotModuleReplacementPlugin کفایت می کند.

حالا به ترمینال می رویم و دستور npm run dev را اجرا می کنیم. این بار با اجرای این دستور webpack به شما آدرس خاصی را می دهد. از آنجایی که من 9000 را برای port انتخاب کرده ام آدرس من localhost:9000 خواهد بود. اگر این آدرس را در مرورگر وارد کنید برنامه در مرورگر برایتان باز خواهد شد. حالا اگر در فایل index.js تغییری ایجاد کنیم (مثلا یک heading اضافه ایجاد کنید). به محض اینکه کدها را Save کنید، تغییرات را در مرورگر مشاهده خواهید کرد.