webpack4.x css 壓縮

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的，若是有問題，能夠留言給我，溜了溜了