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

xt_123456

于 2020-05-16 11:48:13 发布

阅读量424

点赞数

分类专栏： webpack学习文章标签： webpack

本文链接：https://blog.youkuaiyun.com/xt_123456/article/details/106156432

版权

webpack学习专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用optimize-css-assets-webpack-plugin插件在webpack4中压缩和优化CSS结构。主要步骤包括安装插件，配置webpack.config.js，设置插件参数如assetNameRegExp、cssProcessor、cssProcessorPluginOptions等，最后执行打包操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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