[建议收藏] Webpack 4+ 优秀学习资料合集

背景

最近在学习 Webpack 源码，前先后后输出了 6 篇原理分析、工具分享类型的文章，过程当中找到一些质量很高，值得一看的学习资料，因此熬夜整理了一波，但愿对你们有帮助。

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

收录的规则很简单：

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

将来我会持续维护这份列表，很是欢迎社区小伙伴们评论或到我我的公众号 tecvan 投稿。

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

Webpack 基础

使用 Webpack 开发 Web 应用

• 介绍 | Webpack 中文指南: 比较基础比较细的入门教程，很适合初学者
• 2020年了,再不会webpack敲得代码就不香了(近万字实战): 掘金 3000 赞，很是详尽的应用指南，特别是最后性能优化那一块有很强的实践指导意义
• webpack4 的30个步骤打造优化到极致的 react 开发环境，如约而至: 介绍 Webpack + React 开发环境搭建的方方面面，建议读者按图索骥
• How to use Webpack with React: an in-depth tutorial
• webpack-contrib/awesome-webpack
• petehunt/webpack-howto
• Webpack 初学者教学课程 Part 1 - Webpack 简介
• A mostly complete guide to webpack 5 (2020)

使用 Webpack 编写 npm 包

• Let's Write a JavaScript Library in ES6 using Webpack and Babel
• 现代前端库开发指南系列(二):使用 webpack 构建一个库
• [译] 基于 Webpack 和 ES6 打造 JavaScript 类库

使用脚手架

• 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 进阶

高级特性

• Tree Shaking
  • Webpack 4 Tree Shaking 终极优化指南
  • Tree-Shaking性能优化实践 - 原理篇
  • Tree-Shaking性能优化实践 - 实践篇
• 缓存
  • Webpack5 内置缓存方案探索
• Module Federation
  • webpack 5 ModuleFederationPlugin vue 项目初体验

如何编写 Loader

• ✏️ loader知识分享: 展开讲解了 loader 的应用、种类、原理、执行方式等内容，质量很高
• 【Webpack进阶】Loader深刻解析: 虽然阅读量跟赞都很少，但内容详尽，值得看一看
• 手把手教你撸一个 Webpack Loader
• 如何开发一个 Webpack Loader ( 一 )

如何编写 Plugin

• Webpack 案例 -- vue-loader 原理分析: 结合 vue-loader ，实例分析如何编写 Webpack 插件，特别分析了 vue-loader 如何解析一份 SFC 中的三种内容；如何复用 Webpack 配置中的其它 Loader

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

实现原理

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

面试

• 「吐血整理」再来一打Webpack面试题: 掘金高赞，以面试题视角概要解释 Webpack 中的各个知识点
• Webpack interview questions
• webpack 中那些最易混淆的 5 个知识点: 讲解 Webpack 一些经常使用但容易被忽视的配置项，对面试和平常应用都颇有启发

系列连载

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

• 深刻浅出 Webpack: 应该是国内最详尽的 Webpack 书籍，从入门到应用，再到原理、工具都有介绍，很是值得入手
• Webpack 5 知识体系: 一份拆解 Webpack 核心原理、架构、编译流程、loader、插件的在线知识图谱
• 随笔列表第6页 - 书生小龙 - 博客园: 一系列 Webpack 源码分析文章，每篇文章都针对源码某一个特别小的点展开来说
• Webpack Book from SurviveJS : 一本深刻浅出 Webpack 应用、原理、工具等主题的在线书籍
• 史上最走心webpack4.0中级教程--配置以外你应该知道的事
• 刘小夕 - 带你深度解锁 Webpack 系列
  • 带你深度解锁Webpack系列(基础篇)
  • 带你深度解锁Webpack系列(进阶篇)
  • 带你深度解锁Webpack系列(优化篇)
• 滴滴前端技术团队 - 比较硬核的 Webpack 原理分析系列文章，得静下心来慢慢看
  • 你不知道的webpack静态文件生成过程
  • webpack系列之七-文件生成
  • webpack系列之七-附dependencyTemplates依赖模板
  • webpack系列之六chunk图生成
  • webpack系列之五module生成1
  • webpack系列之四loader详解1
  • webpack系列之三resolve
  • webpack系列之二Tapable
  • webpack系列之一总览

性能优化

• Web Performance Optimization with Webpack
• Webpack 4: mode and optimization
• The 100% correct way to split your chunks with Webpack
• iamakulov/awesome-webpack-perf
• Webpack 构建性能优化探索
• 开发工具心得：如何 10 倍提升你的 Webpack 构建效率
• webpack Performance: The Comprehensive Guide
• 完全解决Webpack打包慢的问题
• webpack 构建性能优化策略小结
• 完全解决 webpack 打包文件体积过大: 文章介绍 5 种常见的包体积优化方法，行文特别清晰
• 玩转 webpack，使你的打包速度提高 90%
• ESM vs Webpack 面向高性能构建的探索