Webpack 4 学习08（压缩优化css）

最新推荐文章于 2024-05-19 20:23:46 发布

weixin_33713707

最新推荐文章于 2024-05-19 20:23:46 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/hunterxing/p/10425296.html

本文详细介绍了如何使用optimize-css-assets-webpack-plugin插件压缩CSS文件，包括安装、配置Webpack及参数说明，如assetNameRegExp、cssProcessor等，实现去除注释并优化CSS资源。

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

压缩css,去除注释

安装插件

npm install --save-dev optimize-css-assets-webpack-plugin

配置webpack.config.js

头部引入插件

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") `

参数	意义
assetNameRegExp	正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
cssProcessor	用于压缩和优化CSS 的处理器，默认是 cssnano.
cssProcessorPluginOptions	传递给cssProcessor的插件选项，默认为{}
canPrint	表示插件能够在console中打印信息，默认值是true
discardComments	去除注释

在plugins模块引入

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