前面chapter11介紹了js的代碼分割，本章說下css的代碼分割如何弄垫释。
git倉庫：webpack-demo
1、開始
- 前面chapter11章講
CodeSplitting的時(shí)候已經(jīng)講過代碼分割的概念了撑瞧，是個(gè)什么東西棵譬，但那是對(duì)js模塊做代碼分割，這節(jié)說下css的代碼分割预伺。 - 主要借助的就是一個(gè)插件：MiniCssExtractPlugin订咸，還是沿用我們以前的代碼，我們先來安裝一下酬诀。
$ cd chapter13
$ npm install mini-css-extract-plugin --save-dev
2脏嚷、配置
- 這是一個(gè)插件，并沒有集成到
webpack中瞒御，不像前面12章設(shè)置CodeSplitting那樣加個(gè)optimization屬性搞一下就好了父叙，這里我們要走如何使用一個(gè)插件的流程。 - 進(jìn)入到
webpack.config.js中：- 首先我們需要在開頭
require("mini-css-extract-plugin")引入這個(gè)插件肴裙； - 其次我們需要在
plugins中使用它趾唱； - 然后我們需要把
style-loader都替換為這個(gè)插件提供的MiniCssExtractPlugin.loader。（我這里示例只是替換了處理css的践宴，其他less和sass的處理loader一樣也要替換鲸匿，具體看git倉庫源碼吧）
- 首先我們需要在開頭
// ...
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ...
module: {
rules: [
// 處理css
{
test: /\.css$/,
use: [
- "style-loader",
+ MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
},
]
},
plugins: [
// 打包前刪除掉dist文件避免文件冗余重復(fù)
new CleanWebpackPlugin(),
// 可以為你生成一個(gè)HTML文件
new HtmlWebpackPlugin({
title: "webpack從0到1",
template: "./index.html"
}),
// css文件的代碼分割
+ new MiniCssExtractPlugin()
]
};
- 就這樣，基本的css代碼分割就完事了阻肩，雖然比js的代碼分割復(fù)雜一點(diǎn)带欢，但是也還好，接下來就
npm run build走一波烤惊。
3乔煞、分析一波
-
最后，當(dāng)我們打包完成了以后就可以看到dist目錄下多出的css文件了柒室。（分割出來了）
-
現(xiàn)在整個(gè)
dist目錄有點(diǎn)亂了渡贾，我們?cè)诨仡櫜⒄f明介紹一下各個(gè)文件吧。- 所有
.map文件就不多說了雄右，sourcemap的映射空骚。 - 首先是
0.bundle.js文件，是webpack從0到1-Prefetching/Preloading章的產(chǎn)物擂仍，在示例中因?yàn)槲覀兪褂?code>import()方法動(dòng)態(tài)的加載了footer.js模塊囤屹，所以webpack對(duì)其進(jìn)行了代碼分割。 - 接下來是
vendors~main.bundle.js文件逢渔，因?yàn)樗彩莣ebpack對(duì)其代碼分割生成生的肋坚，是webpack從0到1-CodeSplitting代碼分割章節(jié)的產(chǎn)物，里面是axios的js代碼，為什么與0.bundle.js沒有合并到一起呢智厌？因?yàn)?code>axios的引入是在node_modules里面的诲泌，它們的引入方式對(duì)應(yīng)兩個(gè)不同的緩存組，所以分割為了兩個(gè)文件铣鹏。 -
index.html是HtmlWebpackPlugin這個(gè)插件做的好事羅敷扫。 -
main.bundle.js就是webpack中定義的output指定輸出文件了。 -
main.css就是我們這章說的css代碼分割的產(chǎn)物了吝沫。
- 所有
4呻澜、小結(jié)
- 內(nèi)容就這么多，官網(wǎng)還是要看一看惨险。
參考鏈接 - MiniCssExtractPlugin
