webpack4.x css 压缩

2018-08-02 06:22:00来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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的,如果有问题,可以留言给我,溜了溜了

 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:斗鱼扩展--移除不喜欢的房间(二)

下一篇:斗鱼扩展初识Chrome扩展(一)