آموزش Webpack در 15 دقیقه

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 10 تیر 1397
دسته بندی ها : جاوا اسکریپت

ابزارهای ساخت -Build در حال حاضر تبدیل به یک قسمت یکپارچه از توسعه وب شده‌اند. به صورت اساسی باید گفت که دلیل این موضوع پیچیده شدن اپلیکیشن‌های جاوااسکریپتی است. باندلرها به ما اجازه می‌دهند که موارد جانبی و کتابخانه‌هایی که برای یک پروژه مدرن وب نیاز داریم را پکیج‌بندی، کامپایل و دسته‌بندی نماییم. 

در این آموزش ۱۵ دقیقه‌ای قصد داریم به ابزار Webpack نگاهی بیاندازیم. باندلر و پیش‌پردازنده‌ای قدرتمند و متن باز که می‌تواند وظایف متفاوت بسیاری را مدیریت کند. ما در این آموزش به شما شیوه نوشتن ماژول‌ها، کدهای باندل و استفاده از چندین پلاگین بارگذار را نشان می‌دهیم. این آموزش برای افراد مبتدی تهیه شده است، اما داشتن دانش جاوااسکریپتی بسیار در یادگیری به شما کمک می‌کند. 

نکته: در وبسایت راکت ما دوره آموزشی webpack را ارائه کرده‌ایم. بنابراین برای فراگیری کاملتر از تکنولوژی می‌توانید به دوره آموزشی مراجعه کنید. 

آموزش webpack

چرا Webpack

درست مانند دیگر جنبه‌های دنیای توسعه وب، یک استاندارد کلی برای استفاده از یک ابزار ایجاد وجود ندارد. در حال حاضر، توسعه‌دهندگان باید از بین webpack، Gulp، Browserify، NPM scripts، Grunt و یا ده‌ها مورد مشابه دیگر یکی را انتخاب نمایند. مقایسه‌های بسیار عمیقی در رابطه با این موارد صورت گرفته است اما در نهایت این ابزارها شباهت زیادی به همدیگر دارند. بنابراین برخی اوقات این تنها به سلیقه فردی و پروژه‌های که روی آن‌ها کار می‌کنید بستگی خواهد داشت.

در اینجا می‌توانید چندین نقطه قوت و ضعف را از وب‌پک مشاهده کنید تا بتوانید براساس آن انتخاب‌تان را به درستی انجام دهید:

نقاط قوت:

  • بهترین ابزار برای کار با اپلیکیشن‌های تک صفحه‌ای
  • قابلیت کار با هر دو سینتکس ماژول import و require()
  • قابلیت بسیار پیشرفته برای code splitting
  • قابلیت Hot Reload برای توسعه سریع در فریمورک‌هایی مانند ری‌اکت، ویوجی‌اس و موارد مشابه.
  • محبوبترین ابزار ساخت در سال ۲۰۱۶.

نقاط ضعف:

  • کار کردن با آن برای افراد مبتدی کمی سخت است.
  • کار کردن با فایل‌های سی‌اس‌اس، تصاویر و منابع غیر جاوااسکریپتی در ابتدا کمی سخت است.
  • مستندسازی آن می‌تواند بهتر باشد.
  • تغییرات در آن بسیار به سرعت اتفاق می‌افتد.

۱. نصب کردن

راحت‌ترین راه‌حل برای نصب کردن Webpack استفاده از یک مدیریت پکیج است. ما از npm استفاده می‌کنیم اما جایگزین‌های موجود نیز به خوبی کار خواهند کرد. در هر حالت شما باید نودجی‌اس را روی سیستم عامل‌تان به صورت نصب شده همراه با یک فایل package.json داشته باشید. 

پیشنهاد می‌شود که آن را به صورت محلی (بدون استفاده از تگ -g) نصب کنید. بدین صورت هرکسی که روی پروژه شما کار کند مطمئن می‌شود که از یک نسخه وب‌پک استفاده می‌نماید. 

npm install webpack --save-dev

بعد از اینکه نصب تکمیل شد، بهتر است که وب‌پک را با استفاده از یک اسکریپت نودجی‌اس اجرا نمایید. این خطوط را به کدهای package.json اضافه نمایید:

//...
    "scripts": {
        "build": "webpack -p",
        "watch": "webpack --watch"
    },
//...

حال با فراخوانی کردن npm run build از طریق ترمینال می‌توانیم باندل کردن فایل‌ها را شروه نماییم. با اجرای npm run watch پروسه‌ی شروع می‌شود که در آن هر تغییری به صورت خودکار باندل می‌شود.

آخرین مرحله از نصب ارائه فایل‌هایی است که قصد باندل کردن آن‌ها را داریم. راهکار پیشنهادی برای این حالت استفاده کردن از یک فایل پیکربندی است.

۲. فایل کانفیگ Webpack

حال در قسمت دوم از این آموزش قصد داریم که نگاهی به موارد پایه‌ای از فایل کانفیگ بیاندازیم. البته این صرفا نگاهی مبتدیانه است، کانفیگ مربوط به وب‌پک بسیار قدرتمند است و می‌تواند بسیار پیچیده باشد. 

در دایرکتوری اصلی مروبط به پروژه یک فایل با نام webpack.config.js ایجاد کنید:

webpack.config.js
var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

گزینه entry نشان دهنده فایل اصلی جاوااسکریپت است. استراتژی‌های مختلفی برای این قسمت وجود دارد، اما در بیشتر حالات استفاده از یک ورودی کافی است.

در قسمت output نام و مسیر مربوط به فایل باندل شده را قرار می‌دهیم. بعد از اینکه وب‌پک را اجرا نمودیم ما تمام فایل‌های جاوااسکریپتی را در یک فایل bundle.js خواهیم داشت. این تنها فایل جاوااسکریپتی است که ما در فایل HTML به آن لینک می‌دهیم:

<script src="./dist/bundle.js"></script>

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

۳. ماژول‌های Webpack

وب‌پک راه‌های مختلفی را برای کار با ماژول‌ها فراهم آورده است، شما برای انتخاب هر مورد از آن آزاد هستید. برای این آموزش ما از import در اکمااسکریپت ۶ استفاده می‌کنیم

ما قصد داریم یک ماژول که به کاربران سلام می‌کند را ایجاد کنیم. یک فایل greeter.js را ایجاد کرده و یک تابع ساده را به خروجی می‌فرستیم:

greeter.js
function greet() {
    console.log('Have a great day!');
};

برای استفاده از این ماژول ما باید آن را import کرده و آن را در قسمت entry مربوط به فایل کانفیگ که همان index.js است، اضافه نماییم:

index.js
import greet from './greeter.js';

console.log("I'm the entry point");
greet();

حال اگر باندلر را از طریق npm run build اجرا کنیم و فایل html را در مرورگر اجرا نماییم، خروجی زیر را مشاهده می‌کنیم:

آموزش webpack

فایل entry و ماژول greeter با همدیگر کامپایل شده و یک فایل به نام bundle.js را به وجود آوردند که در نهایت در مرورگر نیز اجرا شدند. در زیر می‌توانید یک فلوچارت ساده از این حالت را مشاهده کنید:

آموزش webpack

۴. کتابخانه‌های لازم

ما می‌خواهیم روزی که اپلیکیشن به کاربران سلام و روز خوش می‌گوید را بدانیم. برای اینکار از moment.js استفاده می‌کنیم. بنابراین باید آن را به صورت مستقیم در ماژول greeter قرار دهیم.

ابتدا نیاز است که کتابخانه مورد نظر را از طریق npm نصب کنیم:

npm install moment --save

بعد از آن در ماژول greeter کتابخانه را درست مانند حالت قبل import می‌کنیم:

greeter.js
import moment from 'moment';

function greet() {
    var day = moment().format('dddd');
    console.log('Have a great ' + day + '!');
};

export default greet;

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

آموزش webpack

دیاگرام ما در این حالت به صورت زیر خواهد بود:

آموزش webpack

راه‌های حرفه‌ای‌تری برای قرار دادن کتابخانه در یک پروژه وجود دارد، اما این حالت خارج از بحث این مقاله است. برای پیدا کردن اطلاعات بیشتر در این زمینه می‌توانید این لینک را مطالعه نمایید.

۵. لودرها - Loaders

لودرها در وب‌پک راهی برای اجرای وظایف مختلف در حین باندلینگ و پردازش‌های دیگر هستند. برای مثال آن‌ها می‌توانند تایپ‌اسکریپت را کامپایل کرده، کامپوننت‌های ویوجی‌اس را بارگذاری نموده، قالبی را رندر کرده و کارهای بسیار دیگری را انجام دهند. بیشتر لودرها توسط جامعه طرفدار و توسعه‌دهنده وب‌پک نوشته شده است. برای مشاهده لیست کاملی از این لودرها می‌توانید این لینک را مشاهده کنید.  

تصور کنید که قصد اضافه نمودن یک linter برای بررسی کردن خطاهای موجود در کدهای جاوااسکریپت را داریم. می‌توانیم این کار را با افزودن JSHint loader به پروژه‌مان انجام دهیم که تمام خطاها و مشکلات موجود را از کدها پیدا می‌کند. 

ابتدای کار نیاز است که هر دوی JSHint و JSHint loader را نصب کنیم:

npm install jshint jshint-loader --save-dev

بعد از آن چند خط کد را به فایل کانفیک وب‌پک باید اضافه نماییم. این کدها لودر را راه‌اندازی کرده و فایل‌های مورد نیاز برای بررسی را مشخص می‌کند. همچنین می‌توانیم فایل‌هایی که باید پشت سر گذاشته شوند را تعیین کنیم.

webpack.config.js
var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};

حال وقتی که وب‌پک شروع می‌شود، لیستی از هشدارها موجود را در ترمینال به ما نشان می‌دهد:

آموزش webpack

از آنجایی که کتابخانه moment.sj در پوشه node_modules قرار می‌گیرد دیگر توسط لودر JSHint بررسی نمی‌شود:

آموزش webpack

مطالعه بیشتر

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

منبع

مقالات پیشنهادی

آموزش less در 10 دقیقه

همه ما میدونیم که نوشتن کد های css کمی خسته کننده است ، مخصوصا زمانی که روی یه پروژه جدی با هزاران خط کد کار میکنیم . شما مجبورید تا آخر پروژه کد های...

آموزش Typescript در ۳۰ دقیقه

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

یادگیری SQL در ۲۰ دقیقه

تمام توسعه‌دهندگان وب باید SQL را بدانند. اگرچه SQL از دهه ۷۰ به بعد ایجاد شد، اما هم اکنون نیز به صورت وسیعی از آن استفاده می‌شود. در حقیقت اگر اپلیک...

آموزش Migration ها در لاراول

لاراول توسط Taylor Otwell توسعه پیدا کرده و یکی از بزرگترین فریمورک های php می باشد و هم برای پروژه ای کوچیک و هم برای پروژه های در مقیاس بزرگ قابل اس...