使用 webpack 自动压缩文件
作者：Seiya
时间：2019年07月14日
JavaScript 文件压缩
在 webpack4.0 中内置了 uglifyjs-webpack-plugin 插件，所以我们打包出来的 js 文件已经默认进行了压缩，不需要进行额外的
css 文件压缩
在进行 css 文件压缩时，需要用到以下两个插件：
optimize-css-assets-webpack-plugin：在 webpack 构建期间搜索 css 资源，并优化 css 代码（默认情况下使用 cssnano 但可以指定 css 处理器）；cssnano：cssnano 是一个在 PostCSS 生态系统之上编写的现代模块化压缩工具，可以用来压缩 css 代码；
具体配置如下：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
...
plugins: [
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano’)
})
]
}
html 文件压缩
在进行 html 文件压缩时，需要用到以下插件：
html-webpack-plugin：使用该插件将自动生成一个 HTML5 文件，配置其中的参数，可以帮助我们实现 html 文件的压缩
具体配置如下：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
/* 指定模板所在路径 */
template: path.join(__dirname, 'src/search.html’),
/* 输出的文件名 */
filename: 'search.html’,
/* chunks 主要用于多入口文件，当有多个入口文件，编译后生成多个文件，chunks 参数能选择要使用哪些些js文件 */
chunks: ['search’],
/* 自动注入 css 和 js */
inject: true,
/* 使用 minify 会对生成的 html 文件进行压缩 */
minify: {
html5: true, //
collapseWhitespace: true, // 删除空白符与换行符
preserveLineBreaks: false, // Prevents the escaping of the values of attributes
minifyCSS: true, // 是否压缩 html 里的 css（使用 clean-css 进行的压缩）
minifyJS: true, // 是否压缩 html 里的 js（使用 uglify-js 进行的压缩）
removeComments: false // 移除HTML中的注释
}
})
]
}