从webpack4开始，用SplitChunksPlugin插件替换了CommonsChunkPlugin插件。
相对于CommonsChunkPlugin，SplitChunksPlugin的使用更加方便和清晰。

在之前的 demo 中，执行完 webpack 后要手动把生成的同步模块的 js 包 (或css包) 引入到html中，这样其实是比较繁琐的。
尤其是在真正的项目开发中，为了对静态资源或第三方包做长缓存，我们会配置 webpack ，让其生成的每个包的文件名都自动带上该包对应的 chunkhash 值。如果文件内容有改变的话，那么该文件对应的包的 chunkhash 也会改变，这样就导致对应的 html 引用的 url 地址也需要进行相应的修改。
因此，我们需要通过 webpack 插件来自动生成 html 以及自动引用相应的 js 包。
html-webpack-plugin 插件就能帮你做到。

本demo06演示webpack打包babel和typescript，关于babel和typescript的webpack单独打包例>子，请看我之前的demo05和demo06

typescript（简称ts）是javascript的超集，具有类型系统，是可编译的。可以想象得到，在代
码运行之前能够进行代码类型检查和编译是多么重要的事儿（就像Java等强类型语言一样）。

babel 7 于2018年8月份发布，在babel 7中，所有官方包更名为以@babel为开头,并且babel 7推
荐使用babel.config.js来配置babel

webpack默认支持es6,Commonjs,AMD,umd规范,
详见webpack模块文档: https://www.webpackjs.com/concepts/modules/

webpack是高度可配置的。webpack.config.js是webpack默认的配置文件名，当直接运行webpack，webpack默认根据webpack.config.js进行打包。

webpack支持零配置打包(无需webpack.config.js配置文件)，我们可以直接运行webpack xxxx.js体验一下

在前端项目的开发过程中，往往后端会给到一份数据接口（本文简称api），为了减少后期的维护以及出错成本，我的考虑是希望能够找到这么一种方法，可以将所有的api以某种方式统一的管理起来，并且很方便的进行维护，比如当后端修改了api名，我可以很快的定位到该api进行修改，或者当后端添加了新的api，我可以很快的知道具体是一个api写漏了。
于是，我有了构建Api Tree的想法。

依赖注入（DI）和控制反转（IOC）基本是一个意思，因为说起来谁都离不开谁。
简单来说，类A依赖类B，但A不控制B的创建和销毁，仅使用B，那么B的控制权则交给A之外处理，这叫控制反转（IOC）。