webpack5 学习7 -- 压缩 JS CSS HTMLJS 的压缩 webpack4 后，内置了 uglifyj

JS 的压缩

webpack4 后，内置了 uglifyjs-webpack-plugin 插件，webpack 会默认使用uglifyjs 对 js 压缩，所以你不需要进行额外配置的。你会发现构建出的js 文件已经是压缩过的

CSS 的压缩

css 压缩，webpack 5 之前一般都会使用 optimize-css-assets-webpack-plugin 与 cssnano

webpack 5 之后，改用 css-minimizer-webpack-plugin

首先加载依赖包

npm install css-minimizer-webpack-plugin --save-dev

配置


plugins: [
    // 这里会默认使用 cssnano 缩减器
    new CssMinimizerWebpackPlugin({
            test: /\.css$/g,
            
        })
]

如果使用 optimize-css-assets-webpack-plugin, 配置：

new OptimizeCSSAssetsWebpackPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano')
})

html 的压缩

加载依赖包

npm i html-webpack-plugin -D

一般一个页面对应一个压缩配置，多页面就要配置多个

html-webpack-plugin 详细的参数用法

new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html'),
            filename: 'index.html',
            chunks: ['index'], // 需要的 chunks
            inject: true, // 打包后的 chunks 是否自动注入
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        }),