درس دوم: یکپارچه‌سازی webpack و پروژه و Loaderها (1)

Webpack Integration with Project and Loaders - 1

03-Webpack-4-The-Complete-Tutorial-For-Beginners-lesson2

در قسمت قبلی webpack را نصب کردیم و حالا باید آن را با پروژه خود یکپارچه کنیم. در قدم اول به فایل index.html بروید و به جای دو تگ اسکریپت جداگانه، یک فایل bundle.js را قرار می دهیم. چرا؟ به دلیل اینکه webpack قرار است تمام فایل های ما را گرفته و فقط یک فایل به نام bundle.js به ما تحویل بدهد (این کار را در جلسه قبل انجام دادیم) بنابراین:

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

ما می خواهیم از ES6 Module ها استفاده کنیم، بنابراین نیازی به ذکر تمام فایل ها نیست. همانطور که می دانید ماژول ها به ما اجازه می دهند که فقط فایل اصلی را بارگذاری کنیم و دیگر فایل ها به صورت خودکار به عنوان وابستگی دانلود می شوند. البته باید از ماژول ها نیز استفاده کنیم بنابراین برای فایل hello-world.js می گوییم:

function helloWorld () {
    console.log('Hello World');
}

export default helloWorld;

یعنی آن را export کرده ایم و سپس برای فایل index.js می گوییم:

import helloWorld from './hello-world.js';

helloWorld();

بدین صورت برنامه ما از ماژول ها استفاده می کند. حالا ترمینال را باز کرده و دستور webpack را اجرا کنید (این دستور را در جلسه قبل تعریف کردیم):

npm run build

با اجرای این دستور فایل bundle.js به ما داده نمی شود بلکه به خطا برمی خوریم. من در جلسه قبل به شما گفتم که در فایل webpack.config.js خطایی وجود دارد و این همان خطا است. Webpack به ما می گوید:

The provided value “./dist” is not an absolute path!

یعنی آدرس پوشه خروجی را به صورت آدرس نسبی (relative path) داده ایم در حالی که در webpack باید این آدرس را به صورت مطلق (absolute path) بدهیم. برای تولید آدرس های مطلق می توانیم از یکی از پکیج های nodejs (خود زبانِ nodejs) به نام path استفاده کنیم. این پکیج درون زبان nodejs موجود است بنابراین نیازی به نصب جداگانه ندارد و فقط باید آن را import کنیم:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: './dist'
    },
    mode: 'none'
}

همانطور که می بینید برای import کردن این پکیج از دستور require استفاده کرده ام که Syntax مربوط به nodejs است. متاسفانه فعلا نمی توان درون فایل پیکربندی Webpack از دستورات ECMA Script مانند import و ... استفاده کرد. حالا که پکیج path را داریم می توانیم به شکل زیر آدرس dist را تبدیل به آدرس مطلق کنیم:

const path = require('path');

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

در پکیج path متدی به نام resolve وجود دارد که آدرس های رشته ای را به هم می چسباند. از طرفی dirname در nodejs آدرس فعلی را به ما می دهد (در اینجا آدرس همین فایل Webpack.config.js) که اگر به آدرس نسبی dist متصل شود، آدرس مطلق را به ما می دهد. به همین راحتی مشکل را حل کرده ایم. حالا به ترمینال رفته و دوباره دستور زیر را اجرا کنید:

npm run build

حالا می بینید که پوشه ای به نام dist به وجود آمده است که درون خود فایلی به نام bundle.js دارد. بنابراین تنظیمات ما به درستی کار می کند و اگر به مرورگر برویم، برنامه ما به خوبی اجرا می شود. عبارت Hello World نیز بدون خطا در کنسول مرورگر دیده خواهد شد.

Loader چیست؟

همانطور که می دانید هدف اولیه webpack این بود که فایل های جاوا اسکریپتی شما را در قالب یک فایل به شما تحویل دهد اما امروزه webpack بسیار پیشرفته تر شده است و می تواند انواع فایل های CSS یا SASS یا XML یا تصاویر و .... را نیز یکی کرده و به شما بدهد. این کار با استفاده از loader ها امکان پذیر است. در واقع loader ها کتابخانه های جاوا اسکریپتی هستند که به شما اجازه می دهند این فایل ها (مثلا CSS) را یکی کرده و تحویل مرورگر بدهید. من در سری آموزشی تایپ اسکریپت در روکسو در این مورد صحبت خواهم کرد و آنجا یاد خواهیم گرفت که چطور از loader های تایپ اسکریپت برای کامپایل کردن و یکی کردن فایل های تایپ اسکریپت استفاده کنیم.

در این جلسه برای مثال می خواهم یک تصویر را با webpack ارسال کنیم. من تصویر یک میوه کیوی را در فایل src قرار داده ام که kiwi.jpg نام دارد و می خواهم آن را با Webpack به DOM ارسال کنم (شما می توانید از هر تصویری استفاده کنید). درون پوشه src یک فایل دیگر به نام add-image.js بسازید و درون آن تابعی بنویسید که تصویر کیوی را به DOM اضافه کند:

function addImage() {
    const img = document.createElement('img');
    img.alt = 'Kiwi';
    img.width = '458';
    img.src = 
}

من این تابع را نوشته ام اما اگر قرار است تصویر را با webpack ارسال کنیم، برای src یا آدرس تصویر باید چه مقداری قرار دهیم؟ برای این کار ابتدا تصویر را import می کنیم:

import Kiwi from './kiwi.jpg';

function addImage() {
    const img = document.createElement('img');
    img.alt = 'Kiwi';
    img.width = '458';
    img.src = Kiwi;
}

همانطور که می بینید من این تصویر را به صورت یک ماژول وارد کرده ام. حالا Kiwi آدرس عمومی تصویر ما را دارد بنابراین می توانیم به سادگی آن را به src پاس بدهیم. حالا عنصر body را هدف می گیریم تا تصویر را درون آن بگذاریم:

import Kiwi from './kiwi.jpg';

function addImage() {
    const img = document.createElement('img');
    img.alt = 'Kiwi';
    img.width = '458';
    img.src = Kiwi;

    const body = document.querySelector('body');
    body.appendChild(img);
}

export default addImage;

در نهایت هم آن را export کرده ام. حالا به فایل index.js می رویم تا آن را صدا بزنیم:

import helloWorld from './hello-world.js';
import addImage from './add-image.js';

helloWorld();
addImage();

بدین صورت این تابع را وارد فایل index.js کرده و آن را صدا می زنیم. قسمت کدنویسی پروژه تمام شده است اما هنوز webpack نمی داند چطور باید چنین تصویری را وارد DOM کند. برای بار اول ما باید به فایل Webpack.config.js رفته و به آن یاد بدهیم که چه کار کند. این کار را در جلسه بعد انجام خواهیم داد.

درس اول: راه‌اندازی اولیه برنامه جاوا اسکریپتی

درس دوم: یکپارچه‌سازی webpack و پروژه و Loaderها (1)

درس سوم: یکپارچه‌سازی webpack و پروژه و Loaderها (2)

درس چهارم: فایل‌های CSS و Webpack

درس پنجم: کار با SASS و Babel

درس ششم: آشنایی با پلاگین‌های webpack

درس هفتم: بررسی فایل CSS و مبحث Browser Caching

درس هشتم: پاکسازی Dist و تولید خودکار HTML

درس نهم: ساخت Template برای فایل‌های HTML

درس دهم: تفاوت‌های Production و Development

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

درس دوازدهم: کار با برنامه‌های MPA

درس سیزدهم: مدیریت وابستگی‌ها با Code Splitting

درس چهاردهم: گزینه‌های بیشتر Code Splitting

درس پانزدهم: ترکیب Webpack و ExpressJS

درس شانزدهم: فایل‌های CSS و جاوا اسکریپت با Express + ترکیب jQuery

درس هفدهم: استفاده از فونت‌ها در Webpack

درس هجدهم: ترکیب Webpack با Bootstrap

درس نوزدهم: ESLint چیست؟ +آموزش استفاده از آن