1 . Why？
打包代码时将所有 js 文件打包到一个文件里，体积太大了，我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。
所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件。
2 . 是什么？
Code Split 只做了两件事：
- 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
- 按需加载：需要哪个文件就加载哪个文件。
3 . 配置多个入口文件：
注意：
有几个入口文件，就会有几个打包输出文件！！！！！（注意出口文件name的设置。）
3 . 1 多入口提取公共模块：
如果多个入口文件同时引用了一个 js 文件下的内容。我们可以将这个 js 文件单独打包，然后在各个入口文件中引用，而不是重复打包好几次！！！
- 修改配置
4 . 多入口，动态按需加载
需要用时再加载。例如我们把函数定义在一个 js 文件中，然后在入口文件中引入，但我们并不是渲染出来就使用，而是触发某个事件后使用，我们就可以当触发这个事件后再进行引入加载。
- 修改文件引入：（改成动态引入）
- import动态引入返回一个 Promise 对象，.then((res)=>{}) ,在res对象中的default属性是文件中的函数！！！
5 . 单入口文件
如果我们的项目是单入口文件，还想实现Code Split功能，应该怎样配置！！！
因为是单入口文件，所以其他配置都用不上了。默认配置就可以实现，共模块单独加载，按需加载....
注意：
Eslint 默认不支持动态导入 import 语法。需要在eslintrc.js中进行配置。
6 . 给模块命名
如果不给模块文件打包后的输出文件进行命名，那么默认就会是一串数字。
用 webpack 魔法命名：
- 在 import 动态引入处进行命名
- 在 webpack 配置，输出文件名处进行配置：
7 . 统一命名
- 对于图片 、logo等资源可以采用统一命名的方式，就不用一一去配置。
- 对于 css 文件，可以改成下列命名配置。这样如果 css 也有多个入口文件，或者也有模块单独打包就可以用上！！！
