webpack4.x css 压缩
程序员文章站
2022-06-21 18:33:47
webpack4.x css压缩,optimize-css-assets-webpack-plugin mini-css-extract-plugin ......
webpack升级到4.x后对于以前的一些配置可能不是很好用了,最近一直在研究css抽离出js代码并对css进行压缩,所以总结一下经验。
webpack4之后,对于抽离css有一个官方比较推荐的插件 mini-css-extract-plugin ,用来将css分离出来,而且配置简单,
首先安装
npm i -D mini-css-extract-plugin
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'style-loader', ], },
是不是很简单,然后在plugins加上
plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash].css', chunkFilename: '[id].[hash].css', }), ]
ok, 这个时候执行打包,你就会发现css已经抽离出来了,but 抽离出来的css是没有压缩的,如果想压缩的话,还需要另一个插件
安装
npm i -D optimize-css-assets-webpack-plugin@5.0.0 postcss-safe-parser cssnano
optimize-css-assets-webpack-plugin在升级到5.0.0时,会有一个报错,safe was removed,
也就是说你参照官网上的配置时会报错的,
github上给出的解决方案是将safe改成parser
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); plugins: [ new OptimizeCSSAssetsPlugin({ assetNameRegExp: /index\.[0-9a-zA-Z]+\.css/g, //需要根据自己打包出来的文件名来写正则匹配这个配置是我自己的 cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: { removeAll: true }, parser: require('postcss-safe-parser'), autoprefixer: false }, canPrint: true }), ]
现在试试打包一下,应该是ok的,如果有问题,可以留言给我,溜了溜了
上一篇: 男女撒谎出现比例最高的十大谎言