複習webpack4之CSS文件代碼分割

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1. MiniCssExtractPlugin

能夠利用這個插件對css進行代碼分割。

注：補充一個知識點，在output中能夠配置chunkFilename，這個是對間接引用的js文件進行命名，稍後會用到。

首先安裝插件cnpm install --save-dev mini-css-extract-plugin。

安裝完成後，在webpack.config.js中引入插件，並在plugins中初始化。

而後配置module，把全部的style-loader替換爲MiniCssExtractPlugin.loader，其餘配置項不變。

進行打包，dist目錄中就有了CSS文件。

若是此時打包的文件沒有css，有多是由於tree Shaking中，package.json沒有設置sideEffects。

2. MiniCssExtractPlugin參數

與js相同，頁面直接引用的css命名規則是filename，而間接引用的css命名規則是chunkFilename。

3.MiniCssExtractPlugin其餘用法

若是咱們引入兩個css文件，MiniCssExtractPlugin會把他們打包到一個文件中。

若是想壓縮css代碼，須要安裝一個插件 optimize-css-assets-webpack-plugin。

首先安裝cnpm install --save-dev optimize-css-assets-webpack-plugin

而後引入插件。

而後在optimization.minimizer初始化插件。

運行打包命令，發現css代碼已經被壓縮合並了。

插件底層也藉助了splitChunksPlugin，若是css有多個入口，也能夠經過cacheGroups來分割合併css代碼。

optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true // 強制忽略minChunks等設置
        }
      }
    }
}
複製代碼

多入口js中，若是想讓各個js中引入的css打包到對應的css文件中，須要這樣配置。

optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          name: 'foo',
          test: (m, c, entry = 'foo') => // foo入口下的css打包到foo.css中
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        },
        barStyles: {
          name: 'bar',
          test: (m, c, entry = 'bar') => // bar入口下的css打包到bar.css中
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        }
      }
    }
}
複製代碼