打包机制：https://github.com/happylindz/blog/issues/6

优化：

根据 webpack 的设计理念，所有资源都是"模块"，webpack 内部实现了一套资源加载机制，可以把像 css（可以在配置中指定为模块解决作用域的问题 {test: /\.css$/, loader: 'style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]' }），图片等资源等有依赖关系的"模块"加载。这跟我们使用 requirejs 这种仅仅处理 js 大大不同。而这套加载机制，通过一个个 loader 来实现。

可以配置外置包，避免重复

持久化缓存：https://www.lindongzhou.com/article/webpack-persistent-cache-practice

给 vendor 生成稳定的 hash 值，每次修改业务代码，这段初始化时代码就会发生变化，那么如果将这段初始化代码放在 vendor 文件中的话，每次都会生成新的 vendor.xxxx.js，这样不利于持久化缓存，所以需要将 vendor 中的初始化代码再次放到新 chunk 中

tree shaking：打包的过程中会将没用（esm 模块可以进行静态分析）的代码进行清除(dead code)

scope hoisting：将不是按需加载也没有共享的模块编译到父模块中

sideEffects：让 webpack 去除 tree shaking 带来副作用的代码