3-3 webpack4插件-压缩CSS和优化CSS结构

通过optimize-css-assets-webpack-plugin插件压缩CSS和优化CSS结构。

具体步骤

1.安装（下载）
打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev optimize-css-assets-webpack-plugin
2.配置webpack.config.js文件
首先需要引入optimize-css-assets-webpack-plugin插件,代码如下：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

3.在module.exports = {}里的plugins里写配置：

new OptimizeCSSAssetsPlugin({
			assetNameRegExp:/\.css$/g,
			cssProcessor:require('cssnano'),
			cssProcessorPluginOptions:{
				preset:['default',{discardComments:{removeAll:true}}]
			},
			canPrint:true
		}),

其中：
1）assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
2）cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano
3）cssProcessorPluginOptions:传递给cssProcessor的插件选项，默认为{}
4）canPrint:表示插件能够在console中打印信息，默认值是true
5）discardComments:去除注释
4.在终端输入npm run dev进行打包。