代码压缩 （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 中 jscollapseWhitespace: true // 标签之间的空白格}
})

CSS 压缩
现阶段我们并没有生成 .css 文件，但是打包后的代码依然是有样式的。
要想让其 css 生效，我们有两种方案：

1. 通过 JS 来动态创建 style 标签进行引入（这就是 style-loader 的作用）
2. 生成 css 文件，也就是通过 link 来引入 css 文件的形式

这两种方案来说，生成 css 文件的方式相对比较好，因为当我们仅修改了 js ，那我们打包后的 css 文件是没有变化，那么用户的访问是可以走缓存的。而如果是把 css 放入 js 中，那我们修改了 js，css 和 js 放在一起，那用户还是要重新请求这个总包的。
所以我们首先需要抽离出 css 文件，在 webpack3 中，我们需要使用 extract-text-webpack-plugin 这个插件，但是现在我们需要使用 mini-css-extract-plugin ，首先

yarn add mini-css-extract-plugin -D

然后在 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()]
}

但官方其实是使用 optimize-css-assets-webpack-plugin 来对其压缩的。具体可见
https://github.com/webpack-contrib/mini-css-extract-plugin

JS压缩

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

"scripts": {"dev": "webpack-dev-server","build": "webpack --mode production"},

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

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

可以看出我们，我们需要对 development 和 production 来单独配置的。