背景

最近在学习 Webpack 源码，前前后后输出了 6 篇原理分析、工具分享类型的文章，过程中找到一些质量很高，值得一看的学习资料，所以熬夜整理了一波，希望对大家有帮助。

本文内容已同步到 github.com/Tecvan-fe/a… ，欢迎投稿。

收录的规则很简单：

• 内容适用于 Webpack 4 以上
• 不看点赞、阅读数，篇幅也可以很短，但内容必须详实，不能有明显偏误
• 不求量不求全，但求涵盖应用、原理、工具等维度，能够给各个层级的同学带来新的知识

未来我会持续维护这份列表，非常欢迎社区小伙伴们评论或到我个人公众号 tecvan 投稿。

关注公众号【Tecvan】，回复【2】，博主手把手带你进字节

Webpack 基础

使用 Webpack 开发 Web 应用

使用 Webpack 编写 npm 包

使用脚手架

• facebook/create-react-app: 快速创建 React 应用脚手架工具
• vuejs/vue-cli: 快速创建 Vue 应用脚手架工具
• tjx666/awesome-chrome-extension-boilerplate : 基于 React & TypeScript & Webpack 的 Chrome 扩展开发模板

Hello World

• Webpack Examples： Webpack 官方提供的示例，涵盖大多数特性的用法
• ruanyf/webpack-demos: 阮一峰老师的 Webpack 入门示例

Webpack 进阶

高级特性

如何编写 Loader

如何编写 Plugin

• 如何写一个webpack插件（一）

实现原理

• [万字总结] 一文吃透 Webpack 核心原理
• 理解webpack原理，手写一个100行的webpack
• Webpack HMR 原理解析 : 知乎高赞，非常详细的 Hot Module Replace 原理分析文档
• AST 与前端工程化实战

面试

系列连载

• 范文杰 - 源码解析 Webpack(私货)
  • [万字总结] 一文吃透 Webpack 核心原理
  • [源码解读] Webpack 插件架构深度讲解
  • 十分钟精进 Webpack：module.issuer 属性详解
  • 有点难的 webpack 知识点：Dependency Graph 深度解析
  • 有点难的知识点： Webpack Chunk 分包规则详解
  • 分享几个 Webpack 实用分析工具

性能优化