说明

DANGER

webpack 5 已经成为了默认版本,所以 webpack4 教程不会持续维护。webpack 5 教程正在书写中。

  • 形式:尽量口语化的笔记和示例。
  • 适用:了解 npm,有原生 js 和 react / vue 开发经验,想要了解、自定义 js 工具链的开发者。
  • 目标:跟着实操能入门 webpack4+,能解决实际开发中 50% 以上的问题,熟悉参考资料后能解决 80% 以上的问题。
  • 思路:是什么 -> 为什么 -> 怎么做为什么 -> 是什么 -> 怎么做
  • 结构:拿单页应用作示例,着重关注怎么使用,最后列出参考资料给你查阅学习。
  • 环境:macOS,zsh,oh-my-zshopen in new windownodeopen in new window v14,vscodeopen in new windowchromeopen in new window。另外用 vscode 的 live server 插件open in new windowserveopen in new window 测试构建。
  • 约定:使用${PROJECT_DIR}表示项目根目录,一般认为package.json所处目录就是项目根目录。
  • 支持:支持现代浏览器和 IE 11。