[设计]Webpack(Tree-shaking+hmr)

• Tree-shaking之模块输出
• webpack插件机制
• HMR原理

webpack源码分析

• webpack源码精读

  • https://mp.weixin.qq.com/s/BuCRMzfmjSZKWk_zhEeVag (opens new window)

• webpack 源码解析系列

  • https://github.com/lihongxun945/diving-into-webpack (opens new window)
  • https://github.com/lihongxun945/diving-into-webpack/blob/maste... (opens new window)

• Webpack 原理浅析

  • https://juejin.cn/post/6854818576470933512 (opens new window)

---

webpack-常用插件

• webpack-chain
• webpack-dev-server
• webpack-merge
• webpack-bundle-analyzer
• uglifyjs-webpack-plugin
• case-sensitive-paths-webpack-plugin
• html-webpack-plugin
• friendly-errors-webpack-plugin

---

HMR

• Webpack hmr原理
  • https://zhuanlan.zhihu.com/p/30669007 (opens new window)

tapable

• @code https://github.com/webpack/tapable (opens new window)

tapable-文章

• 可能是全网最全最新最细的 webpack-tapable-2.0 的源码分析
  • https://juejin.cn/post/5c12046af265da612b1377aa (opens new window)

---

进阶

• sideEffects
• Tree-shaking
• devserver
• 自己编写loader plugins
• node调试工具
• 打包原理