Webpack модули

Макар и webpack да може да bundle-ва JS файлове, не може по подразбиране да транспилира ESNext към JS. За целта също трябва да инсталираме модули.

Нека инсталираме:

npm install @babel/core @babel/preset-env babel-loader --save-dev

При инсталиране на зависимости можем да изредим имената на няколко разделени с интервал.

Така по-горе инсталираме едновременно:

• @babel/core
• @babel/preset-env
• babel-loader

Зареждане на babel модул в webpack

Сега нека добавим следното в webpack.config.js:

const path = require('path');

module.exports = {
    entry: [
        path.resolve('./src/js/functions.js'),
        path.resolve('./src/scss/style.scss')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'functions.bundle.js'
    },
    module: {
        rules: [
            {
                exclude: /node_modules/,
                test: /\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    compact: true
                }
            }
        ]
    }
};

За модулите задаваме rules, което е масив с правила кой файл как да се обработва.

За exclude задаваме webpack да игнорира папката /node_modules/, тъй като там има много файлове и може да забавят изпълнението.

За test трябва с регулярен израз да опишем имена на файлове, които webpack да зареди. В случая изразът, който сме описали е за файлове, чието име завършва с „.js“.

Loader-ите за webpack са важна част, която позволяват на webpack да „прочете“ съдържанието на файловете. Така той може да направи нужните обработки.

Като опции в момента задаваме babel да зареди стандартни настройки от модула @babel/preset-env. Те зависят от средата (development или production). Тази среда е пряко свързана с dev командата, която дефинирахме в package.json. Спомнете си, че там в момента имахме --mode=development.

Зареждане на SCSS модул в webpack

Идва ред и на SCSS.

Първо нека инсталираме:

npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev

По принцип само css-loader ще позволи на webpack да чете CSS файлове. Допълнително са ни нужни и sass-loaderи node-sass за да може той да обработи специфичния синтаксис на SASS и SCSS.

До тук webpack ще може да включи нашите стилове. Той ще ги превърне в JS и ще ги добави във functions.bundle.js.

Защо ни е mini-css-extract-plugin

Този plugin позволява CSS-а ни да не иде в JS-а, а да си остане в отделни CSS файлове.

Но така ще имаме 1 файл за зареждане повече! Нали правим bundle за да намалим броя заявки към сървъра?

1 или 2 заявки само по себе си не е чак такъв проблем.

Аз обаче предпочитам хора с изключен JS на компютъра си да могат все пак да заредят CSS-а. Ако той е включен в functions.bundle.js, тогава сайтът ни ще е гол HTML без никакви стилове. Това лично на мене не ми харесва.

Добавяне на SCSS модула в webpack.config.js

Нека редактираме файла си, така че да имаме:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: [
        path.resolve('./src/js/functions.js'),
        path.resolve('./src/scss/style.scss')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'functions.bundle.js'
    },
    module: {
        rules: [
            {
                exclude: /node_modules/,
                test: /\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    compact: true
                }
            },
            {
                exclude: /node_modules/,
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.bundle.css'
        })
    ]
};

Като цяло настройките са аналогични. Отново изключваме node_modules и задаваме с test зареждане на .scssфайлове.

Този път обаче ни трябват няколко loader-а. Затова подаваме use, който е масив от loader-и.

Накрая обаче трябва да инстанцираме самия MiniCssExtractPlugin plugin и да зададем име на файла, където ще записваме информацията.

Сега вече при изпълнение на npm run dev ще генерираме dist/functions.bundle.js и dist/style.bundle.css.