本篇教程介绍了JavaScript基础教程 webpack4.x css压缩详解，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

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
        }),
]


   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！