通过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
进行打包。