Webpack: development и production environment

За момента имаме само dev script, който да транспилира кода. При празен src/js/functions.js обаче, изходния dist/functions.bundle.js е 5KB. Това е защото включва стартов код, който после ще ни трябва за зареждане на библиотеки.

Ще е добре да го оптимизираме.

Първото, което ще направим е да добавим в package.json и следния script:

"build": "webpack --mode=production"

Имаме напредък – при изпълнение на npm run build файлът вече е 1 KB. Това е защото преди имахме множество коментари, които вече са напълно премахнати.

Нека оптимизираме кода още повече.

Минифициране

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

npm install uglifyjs-webpack-plugin --save-dev

След това да го заредим в webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-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'
        })
    ],
    optimization: {
        minimizer: [new UglifyJsPlugin({
            test: /\.js$/
        })]
    }
};

Зареждаме const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); още в началото на файла. Накрая добавяме и optimization property към настройките, където описваме минификатор.

Това няма да намали размера на текущия ни JS файл, тъй като нямаме собствен код. Но добавяйки код във src/js/functions.js той вече ще бъде минифициран и bundle файлът ще остане възможно най-малък.