https://github.com/vhtml/webpack-MultiPage-static
https://github.com/vhtml/webpack-MultiplePage
打包机制：https://github.com/happylindz/blog/issues/6
https://segmentfault.com/a/1190000038376591
优化：
- 并行，多线程
- 第三方库预编译 // DllPlugin 和 DllReferencePlugin
- 缓存
- 动态 Polyfill
- Scope Hoisting // 被引用了一次的模块才能被合并
根据 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 带来副作用的代码
用 webpack-dev-server 来监听文件变动并热替换 // react 需要使用 babel-loader；
// 原理是搭建了轻量的资源服务器，用 ws 通知客户端进行更新，所以 webpack 配置中要加上 webpack-dev-server 的地址为输入文件
// 使用 webpack-dev-server 跟自己使用 webpack 打包命令相比并没有把打包文件放在指定文件目录，而是放在 dev-server 目录下：
// 'webpack-dev-server/client?http://0.0.0.0:9090', //资源服务器地址
// 'webpack/hot/only-dev-server', // 这两个加载入口文件中
nest（vite） 插件命名规则（似乎和 webpack 一致）：
- tap: 不修改响应数据，执行一些额外逻辑，比如记录日志、更新缓存等
- map：对响应数据做修改，一般都是改成 {code, data, message} 的格式
