webpack4.x css 壓縮

郭先森小超人發表於2018-07-30
WebCSS

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的，如果有問題，可以留言給我，溜了溜了

 
 

相關文章