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

Webpack Integration with Project and Loaders - 1

22 شهریور 1399
درسنامه درس 2 از سری آموزش Webpack
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 توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

amin
06 بهمن 1399
سلام و تشکر از مقالات بسیار خوبتون مشکلی که جدیدا من در سایت مشاهده میکنم اینه که در قسمت هایی که نمونه کد ها قرار داده میشن ، کدها راست چین هستن در صورتی که کد ها باید از سمت چپ نوشته بشن خوانایی کدها اینطوری خیلی سخته

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
07 بهمن 1399
با سلام. این مشکل برطرف شده است.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

amin
07 بهمن 1399
والا برای ما که هرکاری میکنیم استایل های کد ها مشکل دارن مرورگر هم کروم هستش لطفا بررسی کنید مجددا

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

amin
07 بهمن 1399
انگار که مقدار direction برای کادری که کدها قرار دارن هم rtl هستش ! در صورتی که باید مقدار اون ltr باشه

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سهیل
24 دی 1399
کد هاتون استایل نداره و بهم ریخته نمایش داده میشه تو سایت

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
07 بهمن 1399
با سلام. این مشکل برطرف شده است.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.