集体订阅号不反对外链，倡议读者点击左下角“浏览原文”获取更好的浏览体验。

背景

最近在学习 Webpack 源码，前前后后输入了 6 篇原理剖析、工具分享类型的文章，过程中找到一些品质很高，值得一看的学习材料，所以熬夜整顿了一波，心愿对大家有帮忙。

收录的规定很简略：

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

将来我会继续保护这份列表，十分欢送社区小伙伴们到我集体公众号 tecvan 投稿。

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 面向高性能构建的摸索