代码压缩

Webpack对代码的压缩可分为三个部分，HTML、CSS、JS。

压缩HTML

通过 html-webpack-plugin 插件进行HTML的压缩
html-webpack-plugin 插件主要是有来简化HTML文件的创建，将webpack中配置的output js文件和 mini-css-extract-plugin 等插件抽取的CSS文件插入到提供的template中生成一个html文件放在输出目录中。
同时该插件也可以对html进行压缩，压缩主要是使用 [html-minifier-terser] 来完成，可用的压缩配置项如下 html-minifier options
示例：

new HtmlWebpackPlugin({
    filename: `${projectName}/index.html`,
    template: `src/${projectName}/index.html`,
    minify: {
        html5: true, // 根据HTML5规范解析输入
        collapseWhitespace: true, // 折叠空白区域
        preserveLineBreaks: false, 
        minifyCSS: true, // 压缩文内css
        minifyJS: true, // 压缩文内js
        removeComments: false // 移除注释
    }
})

minify可以传Boolean和Object两种类型，当mode为“production”模式是，minify默认为true，其他模式为默认为false。

但尝试在production模式下，minify不配置的情况下，html并没有被压缩。

压缩CSS

CSS的压缩需要两个插件配合使用：

• mini-css-extract-plugin：提取css到单独的文件
• optimize-css-assets-webpack-plugin：压缩CSS文件，默认情况下使用cssnano来进行压缩。

mini-css-extract-plugin

该插件可以分离提取CSS到单独的文件中，该插件仅在生产环境上使用，开发环境可以使用style-loader，特别是你开启了HMR热更新。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV === 'development'
// ...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader },
                { loader: 'css-loader' },
                {
                    loader: 'px2rem-loader',
                    options: {
                        remUnit: 37.5,
                        remPrecision: 8
                    }
                },
                { loader: 'postcss-loader' }
            ]
        }
    ]
},
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].[contenthash:8].css',
        chunkFilename: '[id].[contenthash:8].css'
    }),
]

optimize-css-assets-webpack-plugin

在生产环境可以使用该插件来压缩CSS，需要设置optimization.minimizer属性，但是设置该属性会覆盖webpack默认的js压缩，所有还必须设置js的压缩插件。

const TerserJSPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash:8].css',
            chunkFilename: '[id].[contenthash:8].css'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 37.5,
                            remPrecision: 8
                        }
                    },
                    { loader: 'postcss-loader' }
                ]
            }
        ]
    }
}

压缩JS

用于压缩JS代码的插件主要有两个：

• uglifyjs-webpack-plugin：压缩JavaScript代码，不支持ES6
• terser-webpack-plugin：压缩JavaScript代码，支持ES6

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
    minimizer: [
        new UglifyJsPlugin()
    ],
    noEmitOnErrors: true
},

压缩ES6

const TerserPlugin = require('terser-webpack-plugin')
optimization: {
    minimizer: [
        new TerserPlugin()
    ],
    noEmitOnErrors: true
},