扶着你玩转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 // 标签之间的空白格
  }
})

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 来单独配置的。