webpack5之JS和CSS的压缩minimize背景单独记录一下webpack5的JS和CSS的压缩是怎么配置的

背景

单独记录一下webpack5的JS和CSS的压缩是怎么配置的

使用多进程并行运行来提高构建速度
过滤console.log

安装

npm install terser-webpack-plugin -D
npm install css-minimizer-webpack-plugin  -D

setup

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true, /* 使用多进程并行运行来提高构建速度 */
                test: /\.js$/,
                terserOptions: {
                    compress: {
                        drop_console: true /* 过滤console.log */
                    }
                    // https://github.com/terser/terser#minify-options
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                },
            })
        ]
    },
}

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                test: /\.css$/g,
                parallel: true /* https://github.com/webpack-contrib/css-minimizer-webpack-plugin#parallel */
            }),
        ]
    }
}