這節課講解
webpack4
打包多頁面應用過程中的提取公共代碼部分。相比於webpack3
,4.0
版本用optimization.splitChunks
配置替換了3.0
版本的CommonsChunkPlugin
插件。在使用和配置上,更加方便和清晰。
1. 準備工作
按照慣例,我們在src/
文件夾下創建pageA.js
和pageB.js
分別作爲兩個入口文件。同時,這兩個入口文件同時引用subPageA.js
和subPageB.js
,而subPageA.js
和subPageB.js
又同時引用module.js
文件。
代碼目錄結構如下圖所示:
希望大家理清邏輯關係,下面從底層往上層進行代碼書寫。
module.js
:
export default "module";
subPageA.js
:
import "./module";
export default "subPageA";
subPageB.js
:
import "./module";
export default "subPageB";
正如我們所見,subPageA.js
和subPageB.js
同時引用module.js
。
最後,我們封裝入口文件。而爲了讓情況更真實,這兩個入口文件又同時引用了lodash
這個第三方庫。
pageA.js
:
import "./subPageA";
import "./subPageB";
import * as _ from "lodash";
console.log("At page 'A' :", _);
export default "pageA";
pageB.js
:
import "./subPageA";
import "./subPageB";
import * as _ from "lodash";
console.log("At page 'B' :", _);
export default "pageB";
好了,到此爲止,需要編寫的代碼已經完成了。>>> src 文件夾項目源碼
2. 編寫webpack
配置文件
首先我們應該安裝先關的庫,創建package.json
,輸入以下內容:
{
"devDependencies": {
"webpack": "^4.15.1"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
在命令行中運行npm install
即可。
然後配置webpack.config.js
文件。文件配置如下:
const webpack = require("webpack");
const path = require("path");
module.exports = {
// 多頁面應用
entry: {
pageA: "./src/pageA.js",
pageB: "./src/pageB.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
optimization: {
splitChunks: {
cacheGroups: {
// 注意: priority屬性
// 其次: 打包業務中公共代碼
common: {
name: "common",
chunks: "all",
minSize: 1,
priority: 0
},
// 首先: 打包node_modules中的文件
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 10
}
}
}
}
};
着重來看optimization.splitChunks
配置。我們將需要打包的代碼放在cacheGroups
屬性中。
其中,每個鍵對值就是被打包的一部分。例如代碼中的common
和vendor
。值得注意的是,針對第三方庫(例如lodash
)通過設置priority
來讓其先被打包提取,最後再提取剩餘代碼。
所以,上述配置中公共代碼的提取順序其實是:
... ...
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 10
},
common: {
name: "common",
chunks: "all",
minSize: 1,
priority: 0
}
... ...
3. 打包和引用
命令行中運行webpack
即可打包。可以看到,我們成功提取了公共代碼,如下圖所示:
最後,打包的結果在dist/
文件夾下面,我們要在index.html
中引用打包好的js
文件,index.html
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/common.chunk.js"></script>
<script src="./dist/vendor.chunk.js"></script>
<script src="./dist/pageA.bundle.js"></script>
<script src="./dist/pageB.bundle.js"></script>
</body>
</html>
使用 Chrome 或者 Firfox 打開index.html
,並且打開控制檯即可。
歡迎技術交流,引用請註明出處。
個人網站:GodBMW.com
原文鏈接:webpack4 系列教程(三): 多頁面解決方案--提取公共代碼