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

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

در دوره جدیدی که در آن هستیم، برنامه های وب تکامل پیدا کرده اند و با حضور فریم ورک هایی مانند react و vue و angular برنامه نویسان به نوعی استاندارد قراردادی رسیده اند که برنامه های خود را به کامپوننت های مختلف تقسیم کنند. رفتار هر کدام از این کامپوننت ها با استفاده از جاوا اسکریپت و ظاهر آن با استفاده از CSS تعیین می شود بنابراین اگر فایل های CSS و جاوا اسکریپتِ هر کامپوننت در یک قسمت قرار بگیرند کار با آن ها بسیار راحت تر خواهد بود و همچنین پیدا کردن خطا ها (debugging) نیز بسیار آسان تر می شود. برای نشان دادن این موضوع باید برنامه خود را تغییر دهیم.

من می خواهم این برنامه را به شکل یک دکمه در بیاورم که اگر روی آن کلیک شود، عبارت Hello World در قالب یک تگ p در مرورگر نمایش داده شود. برای این کار ابتدا یک پوشه به نام components می سازم که درونش یک پوشه دیگر به نام hello-world-button باشد. حالا فایل hello-world.js را از پوشه src برداشته و درون پوشه hello-world-button انتقال می دهم و نامش را hello-world-button.js می گذارم. حالا کدهای قدیمی آن (تابع helloWorld) را حذف کرده و یک کلاس به نام HelloWorldButton برایش می سازیم:

class HelloWorldButton {

    render() {
        const button = document.createElement('button');
        button.innerHTML = 'Hello world';
        const body = document.querySelector('body');
        body.appendChild(button);
    }
}

export default HelloWorldButton;

همانطور که می بینید این کلاس متدی به نام render دارد. درون آن ابتدا body و دکمه (button) را هدف گرفته و درون دو ثابت ذخیره می کنیم. سپس متن درون دکمه را مشخص کرده (Hello World) و در نهایت دکمه را به body در برنامه خود append می کنیم. حالا به index.js می رویم این کامپوننت را در آن قسمت وارد می کنیم:

import HelloWorldButton from './components/hello-world-button/hello-world-button.js';

حالا یک نمونه از این کامپوننت را در همین فایل می سازیم:

import HelloWorldButton from './components/hello-world-button/hello-world-button.js';

const helloWorldButton = new HelloWorldButton();
helloWorldButton.render();

حالا این کدها را ذخیره کرده و webpack را اجرا کنید. اگر به مرورگر بروید، دکمه Hello World را مشاهده می کنید اما این دکمه هنوز هیچ کاری نمی کند چرا که برایش کدی ننوشته ایم. برای این کار دوباره به کلاس hello-world-button.js برمی گردیم تا کلاس خود را تکمیل کنیم:

class HelloWorldButton {
    render() {
        const button = document.createElement('button');
        const body = document.querySelector('body');
        button.innerHTML = 'Hello world';
        button.onclick = function () {
            const p = document.createElement('p');
            p.innerHTML = 'Hello world';
            p.classList.add('hello-world-text');
            body.appendChild(p);
        }
        button.classList.add('hello-world-button');
        body.appendChild(button);
    }
}

export default HelloWorldButton;

همانطور که می بینید من از یک Event استفاده کرده ام و می گویم زمانی که روی دکمه ما کلیک شد باید یک تگ p ساخته شود که عبارت hello world را داشته باشد. در نهایت این تگ به body متصل می شود بنابراین متن hello world نمایش داده می شود. همچنین با استفاده از خصوصیت classList کلاس 'hello-world-button' را به دکمه و کلاس 'hello-world-text' را به تگ p اضافه کرده ام. ما هنوز چنین کلاسی را تعریف نکرده ایم بنابراین یک فایل دیگر به نام hello-world-button.css ایجاد کنید (در همین پوشه hello-world-button) و استایل های زیر را درونش قرار دهید:

.hello-world-button {
    font-size: 20px;
    padding: 7px 15px;
    background: green;
    color: white;
    outline: none;
}

.hello-world-text {
    color: green;
    font-weight: bold;
}

حالا به لطف webpack می توانیم کدهای CSS را درون فایل hello-world-button.js وارد کنیم:

import './hello-world-button.css';

class HelloWorldButton {
    buttonCssClass = 'hello-world-button';

    render() {
        const button = document.createElement('button');
        const body = document.querySelector('body');
        button.innerHTML = 'Hello world';
        button.onclick = function () {
            const p = document.createElement('p');
            p.innerHTML = 'Hello world';
            p.classList.add('hello-world-text');
            body.appendChild(p);
        }
        button.classList.add('hello-world-button');
        body.appendChild(button);
    }
}

export default HelloWorldButton;

حالا کارمان در این قسمت تمام شده است اما webpack نمی داند چطور باید با فایل های CSS برخورد کند بنابراین به فایل webpack.config.js می رویم تا یک rule دیگر اضافه کنیم:

    module: {
        rules: [
            {
                test: /\.(png|jpg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name][contenthash:5].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            }
        ]
    }

همانطور که می بینید ما می توانیم برای قسمت loader ها دو یا چند loader را ادغام کنیم. اولین loader که css-loader است کدهای CSS ما را می خواند و style-loader نیز (loader دوم) این استایل های خوانده شده را وارد فایل index.html می کند. حالا باید این دو loader را نصب کنیم بنابراین در یک پنجره ترمینال می گوییم:

npm install css-loader style-loader --save

حالا npm run build را اجرا می کنیم تا ببینیم در مرورگر چه اتفاقی می افتد. اگر این مراحل را درست انجام داده باشید نباید هیچ مشکلی در این زمینه وجود داشته باشد و تمام کدهایمان به درستی کار خواهند کرد.