webpack4 系列教程(三): 多页面解决方案--提取公共代码

这节课讲解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