webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解
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即可打包。可以看到，我们成功提取了公共代码，如下图所示：
1.png
最后，打包的结果在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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/common.chunk.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/vendor.chunk.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/pageA.bundle.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/pageB.bundle.js"></script></body></html>
使用 Chrome 或者 Firfox 打开index.html，并且打开控制台即可。
欢迎技术交流，引用请注明出处。
个人网站：Yuan Xin
原文链接：webpack4 系列教程(三): 多页面解决方案--提取公共代码
作者：godbmw
链接：https://www.jianshu.com/p/78dcf6de23eb
共同学习，写下你的评论
评论加载中...
作者其他优质文章
