webpack 压缩css-webpack5以上版本 使用optimize-css-assets-webpack-plugin压缩问题

题主是否想询问“webpack压缩css时动画属性被去掉了的原因吗”原因如下:

1、vue-cli脚手架配置文件里面对浏览器的版本做了css的前缀处理。

2、继续安装之前压缩Js的插件,就不会再对css进行压缩,所以属性就被去掉了。

该插件主要用来压缩css文件

使用:

1.安装

2.配置

参数:

assetNameRegExp :一个正则表达式,指示应优化最小化的资源的名称。提供的正则表达式针对配置中 ExtractTextPlugin 实例导出的文件的文件名运行,而不是源CSS文件的文件名。默认为/.css$/g

cssProcessor :用于优化最小化CSS的CSS处理器,默认为cssnano。这应该是一个跟随接口的函数(接收CSS和选项参数并返回一个Promise)。

cssProcessorOptions :传递给cssProcessor的选项,默认为 {}

cssProcessorPluginOptions :传递给cssProcessor的插件选项,默认为 {}

canPrint :一个布尔值,指示插件是否可以将消息打印到控制台,默认为 true

optimize-css-assets-webpack-plugin无法实现压缩css,打包过程中会出现

[DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use instead and use one of _ASSETS_STAGE_* as stage option)

这是因为optimize-css-assets-webpack-plugin 在webpack5中已不在友好支持

解决办法 使用 css-minimizer-webpack-plugin 为webpack5支持版

optimization: {

minimize: true,

minimizer: [

new CssMinimizerPlugin(),

],