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

آموزش Webpack قسمت 2: دستور Build

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

ضمیمه ها

WebpackSample.rar

در قسمت قبلی آموزش Webpack با نحوه نصب و استفاده از Webpack آشنا شدیم و دیدیم که چجوری میشه بوسیله دستور Webpack فایل های Javascript رو پردازش و Minify کرد. در این قسمت با دستورات Build آشنا میشیم. دستوری که در قسمت قبلی می نوشتیم به صورت زیر بود:

node_modules\.bin\webpack --mode=production

اما میشه کاری کرد که نوشتن این دستور راحت تر بشه. اگر نگاهی به فایل package.json بندازیم بخشی داریم به نام scripts که یک دستور با نام test تعریف شده:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

در این بخش می تونیم دستورات مورد نظرمون رو بنویسیم و بوسیله دستور npm اون ها رو فراخوانی کنیم. بخش test رو حذف می کنیم و دستور زیر رو جایگزینش می کنیم:

  "scripts": {
    "build": "webpack --mode=production"
  },

حالا کافیه به جای دستور قبلی برای اجرای webpack، دستور زیر رو در محیط command اجرا کنیم:

D:\WebpackSample>npm run build

بعد از اجرای دستور بالا عملیات اجرای دستور webpack برای ما انجام میشه و فایل main.js ایجاد میشه. همونطور که میبینید ما در بخش scripts آدرس webpack رو مشخص نکردیم و فقط دستور webpack رو نوشتیم، دلیل اینکار این هست که npm به صورت خودکار داخل پوشه bin به دنبال این دستور میگرده و اجراش می کنه. می تونیم اسکریپت دیگه ای با نام dev ایجاد کنیم برای حالت Development:

  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack --mode=development"
  },

نحوه اجرا هم به صورت زیر هست:

npm run dev

تفاوت حالت production و development در minify کردن فایل javascript و محتویات اون هست، در حالت production فایل ما minify میشه و در بهینه ترین حالت ممکن خروجی برای ما تولید میشه، اما در حالت production فایل به صورت عادی ایجاد میشه و بهینه سازی خاصی بر روی فایل انجام نمیشه و تنها هدف ایجاد فایلی هست که برای ما خروجی رو تولید کنه.

به امید خدا در بخش های بعدی در مورد نوشتن کدهای Modular و نحوه نشوتن کدها در چندین فایل مختلف توضیح میدیم.

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

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

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

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