webpack4系列第二发

代码压缩 （HTML，CSS，JS）

HTML代码的压缩，我们还是需要借助 htmlWebpackPlugin 。

new HtmlWebpackPlugin({
  filename: 'index.html', // 配置输出文件名和路径
  template: 'src/index.html', // 配置文件模板
  title: '陪你渡过漫长岁月', // title变量
  minify: { // 压缩HTML代码的配置
    minifyCSS: true, // HTML 中的 css 
    minifyJS: true, // HTML 中 js
    collapseWhitespace: true // 标签之间的空白格
  }
})

JS代码的压缩，在 webpack4 中，我们只需要把 mode 设置为 production 即可。
可以在 pageage.json 中对 script task 进行配置：

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "webpack --watch --mode development",
   "start": "webpack-dev-server --open --mode development",
   "build": "webpack --mode production" //这里就是 生产 模式
 },

也可以在 webpack.config.js 中进行配置：

module.exports = {
    mode: 'production',
    entry: '',
    output: '',
    //
}

CSS 代码的压缩，首先我们需要知道，我们并没有生成 .css 文件，所以我们首先需要抽离出 css 文件，我们需要借助 mini-css-extract-plugin ，上一节我们说过，要想让其 css 生效，我们动态创建 style 标签进行引入（这就是 style-loader 的作用），另一种就是生成 css 文件，然后在 html 中直接进行引用。 很显然，mini-css-extract-plugin 和 style-loader 使用其中一个就可以了。

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['MiniCssExtractPlugin.loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}

然后我们可以使用 css-loader 为我们提供的 minimize 来对 css 进行压缩。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, {
                    loader: 'css-loader',
                    options: {
                        minimize: true
                    }
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}