这节课讲解
webpack4
打包多页面应用过程中的提取公共代码部分。相比于webpack3
,4.0
版本用optimization.splitChunks
配置替换了3.0
版本的CommonsChunkPlugin
插件。在使用和配置上,更加方便和清晰。
专注前端与算法的系列干货分享,欢迎关注(¬‿¬):
「微信公众号:心谭博客」| xin-tan.com | GitHub
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