webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过webpack的写法和内置函数实现的。

目前webpack针对此项功能提供 2 种函数：

1. import(): 引入并且自动执行相关 js 代码
2. require.ensure(): 引入但需要手动执行相关 js 代码

本文将会进行逐一讲解。

>>> 本节课源码

>>> 所有课程源码

专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：
「微信公众号：心谭博客」| xin-tan.com | GitHub

1. 准备工作

此次代码的目录结构如下：

其中，page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面，我们按照代码引用的逻辑，从底向上展示代码：

module.js:

export default "module";

subPageA.js:

import "./module";
console.log("I'm subPageA");
export default "subPageA";

subPageB.js:

import "./module";
console.log("I'm subPageB");
export default "subPageB";

请注意：subPageA.js 和 subPageB.js 两个文件中都执行了console.log()语句。之后将会看到import()和require()不同的表现形式：是否会自动执行 js 的代码？

2. 编写配置文件

下面编写webpack配置文件（很简单）：

const webpack = require("webpack");
const path = require("path");

module