之前學習過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

}

}

}

}

復制代碼

總結

以上是生活随笔為你收集整理的css练习题4,复习webpack4之CSS文件代码分割的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。