搜罗一切 webpack 的好文章好工具

webpack 优秀中文文章

如有好文, 请到此issue里提交文章，或者直接发pull request.

🎓 webpack 入门

📕 webpack 小册

• 《webpack指南》 | TooBug | 2015
• 《深入浅出Webpack》 | gwuhaolin | 2017
• 《Webpack 中文指南》 | 赵达 | 2017
• 《Webpack Guidebook》 | tsejx | 2018
• 《玩转 webpack》 | 程柳锋 | 2019

📕 webpack1.x

• webpack-demos | ruanyf | 2016
• 一小时包教会 —— webpack 入门指南 | VaJoy Larn | 2015-07-16
• webpack 入门及实践 | zhouweicsu | 2015-10-30
• Webpack傻瓜式指南（一） | 张轩 | 2016
• Webpack傻瓜式指南（二） | 张轩 | 2016
• 入门Webpack，看这篇就够了 | zhangwang | 2016-08-05
• 教你一步步从零构建webpack开发多页面环境 | riskers | 2017-01-19
• 让 Webpack 来帮你打包吧 | 达仔 | 2016-06-19
• 前端自动化构建工具Webpack开发模式使用指南 | _accelerator_ | 2017-01-18
• webpack 学习（一） | dear-lizhihua | 2017-01-31
• webpack入门必知必会 | 劳卜 | 2017-01-09
• webpack深入与实战 | qbaty | 2017-02-15
• 「前端」看懂前端脚手架你需要这篇webpack | 尚妆产品技术刊读 | 2017-03-14

📕 webpack2.x

📖 webpack2.x 入门

• [译] Webpack 2 有哪些新东西 | cssmagic | 2016-02-15
• Webpack 2 入门教程 | llp | 2016-11-29
• Webpack 2 Tree Shaking Configuration | Grgur Grisogono | 2016-02-31
• webpack2 tree-shaking 编译研究 | Jschyz | 2017-01-16
• [译文]使用 Webpack 2 和 Babel 6 进行 Tree-shaking | Zhang Visper | 2016-04-29
• webpack 2.2: 最终的版本 | leo | 2017-01-18
• Webpack 2最终版本发布，聚焦文档内容提升 | 刘嘉洋 | 2017-01-23
• webpack 2及更高版本 | leo | 2017-02-02
• 从 webpack v1 迁移到 webpack v2 | 十年踪迹 | 2017-01-19
• webpack2 升级指南和特性摘要 | Abact | 2017-01-20
• [译]webpack2 快速入门 | dwqs | 2017-01-20
• 升级到 webpack2 | 公子 | 2017-01-26
• 技术 | webpack 2 使用总结 | 象尘说 | 2017-02-05
• 【翻译向】webpack2 指南（上） | 抹桥 | 2017-01-17
• webpack2异步加载套路 | 苹果小萝卜 | 2017-02-08
• 超清 Webpack 2 视频教程 (持续更新) | 作者：Parry | 2017-05-16

📖 webpack2.x boilerplate

• es6-webpack2-boilerplate | maiwenan | 2016-12-08
• webpack2-boilerplate | leifoolsen | 2016-07-04
• webpack2-boilerplate | MikeLP | 2016-11-01

📕 webpack3.x

• webpack 3: 正式发布!! | sangle7 | 2017-06-20
• 【闲聊】webpack 3 来了 | TooBug | 2017-06-20
• webpack 3 scope-hoisting 做 code splitting | webpack

📕 webpack4.x

• Web Performance Optimization with webpack | Google Developers | 2018-02-28
• Webpack4.0各个击破系列 | 大史不说话 | 2018-02-28
• 2020年了,再不会webpack敲得代码就不香了(近万字实战) | 黄小虫 | 2019-12-25
• 带你深度解锁Webpack系列(基础篇) | 刘小夕 | 2020-03-02
• 带你深度解锁Webpack系列(进阶篇) | 刘小夕 | 2020-03-09

📕 webpack5.x

• webpack 5 ModuleFederationPlugin vue 项目初体验 | zhaiyy | 2020-10-14
• Webpack 5 之 模块联合（Module Federation） | lumin | 2021-07-23
• ESM vs Webpack 面向高性能构建的探索 | 淘系前端团队 | 2021-04-06

🎓 webpack 进阶

📕 webpack 构建性能优化

• Webpack 构建性能优化探索 | pigcan | 2016-08-28
• webpack使用优化（基本篇） | leehey | 2016-01-10
• webpack使用优化（react篇） | leehey | 2016-04-17
• 开发工具心得：如何 10 倍提高你的 Webpack 构建效率 | 紅白 | 2016-06-21
• webpack Performance: The Comprehensive Guide | leehey | 2016-10-26
• 彻底解决Webpack打包慢的问题 | 王伟嘉 | 2016-07-27
• webpack 构建性能优化策略小结 | Abact | 2016-12-22
• Webpack实战 - 使用动态 entry 改善调试体验 | JSCON简时空 | 2016-01-09
• webpack打包分析与性能优化 | hawx1993 | 2017-02-13
• webpack2 终极优化 | gwuhaolin | 2017-06-29
• webpack前端构建性能优化策略小结 | 今日头条技术团队 | 2017-09-03
• 【视频】webpack打包机制及调试优化 | Alexey Ivanov | 2017-08-26
• Webpack5 内置缓存方案探索 | XxjzZ | 2020-07-06
• 带你深度解锁Webpack系列(优化篇) | 刘小夕 | 2020-03-16

📕 webpack针对项目的优化

📖 文件体积

• 彻底解决 webpack 打包文件体积过大 | clinyong | 2016-03-12
• webpack打包bundle.js体积大小优化 | youngwind | 2016-04-20
• webpack CommonsChunkPlugin详细教程 | wjkang | 2016-09-03
• Webpack的dll功能 | 王成 | 2016-07-15
• webpack 如何把代码内联进html中？ | 滴滴公共前端团队 - 水乙 | 2017-01-11
• 为什么 WebPack 2 的 Tree Shaking 并不如你想的高效 | 少年阿布DX | 2017-02-24
• 译：如何在 Webpack 2 中使用 tree-shaking | 薛定谔的猫 | 2017-04-24
• 【翻译】Webpack 4 Tree Shaking 终极优化指南 | KaysonLi | 2019-11-17
• Tree-Shaking性能优化实践 - 原理篇 | 百度外卖大前端技术团 | 2018-01-04
• Tree-Shaking性能优化实践 - 实践篇 | 百度外卖大前端技术团 | 2018-01-04

📖 样式及合图

• webpack之postcss集成 | qinghui | 2016-03-12
• webpack自动雪碧图生成 | kyoko-df | 2016-03-16

📖 文件缓存

• Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案 | 才子锅锅 | 2016-06-28
• Webpack的静态资源持久缓存 | yanni4night | 2016-09-05
• 使用 Webpack 打包单页应用的正确姿势 | 陈秋歌 | 2017-01-26
• 用 webpack 实现持久化缓存 | Sebastian Blade | 2017-01-25
• webpack之CommonsChunkPlugin正确打开方式 | soullcm | 2016
• 在 Webpack 中分离 vendor 与 app | lmk123 | 2016-09-12

📖 自动刷新及热替换

• Express结合Webpack的全栈自动刷新 | 梁砫 | 2016-02-08
• 手把手深入理解 webpack dev middleware 原理與相關 plugins | andyyu0920 | 2016-06-01
• webpack dev server 2.0 有什么新的变化 | leo | 2017-01-22
• webpack 热加载你站住，我对你好奇很久了 | 1000copy | 2016-12-22

📖 其它

• [webpack] devtool里的7种SourceMap模式是什么鬼？ | 滴滴出行·DDFE | 2016-12-06
• 4种使用webpack提升vue应用的方式 | 美团金融前端团队@孙辉 | 2017-07-16

📕 webpack 工程化思考与实践

• webpack原理与实战 | gwuhaolin | 2017-06-29
• 【翻译】Webpack——令人困惑的地方 | chemdemo | 2016-05-04
• 【译】关于Webpack中一些让人困惑的地方的解答 | jrainlau | 2016-08-03
• 基于webpack搭建前端工程解决方案探索 | chemdemo | 2015-08-18
• webpack 单页面应用实战 | huangsw | 2016-07-04
• webpack多页应用架构系列 | array_huang | 2016-09-07
• 使用webpack命令行工具:webpack-dashboard | Yao Wenjie | 2016-08-28
• Webpack从入门到上线 | 会编程的银猪 | 2016-09-16
• 基于 webpack 搭建前端工程基础篇 | chenbin92 | 2016-07-12
• 使用 Riot、ES6 和 Webpack 构建应用 | PPxu | 2016-07-15
• webpack 使用总结 | Tumars | 2016-12-27
• 如何在 webpack 中引入未模块化的库，如 Zepto | Sebastian Blade | 2016-10-06

🎓 webpack & React

• Webpack+React+ES6开发模式入门指南 | 大额_skylar | 2015-09-18
• 手把手教你基于ES6架构自己的React Boilerplate项目 | lhc | 2016-04-30
• 使用 webpack + react + redux + es6 开发组件化前端项目 | xiaoyann | 2016-07-14
• webpack4 的30个步骤打造优化到极致的 react 开发环境，如约而至 | 张不怂 | 2019-06-10

🎓 webpack & Vue

• Vue+Webpack使用规范 | Aresn | 2016-07-21
• Vue.js 和 Webpack | djyde | 2016
• 使用 Vuex + Vue.js 构建单页应用 | 离尘不理人 | 2016-07-06
• webpack入坑之旅系列 | guowenfh | 2016-03-24
• vue-cli#2.0 webpack 配置分析 | 滴滴出行·DDFE | 2016-12-12
• Vue+Webpack使用规范 | Aresn | 2016-07-24
• Vue+Webpack开发可复用的单页面富应用教程（配置篇） | Aresn | 2016-07-24
• Vue+Webpack开发可复用的单页面富应用教程（组件篇） | Aresn | 2016-07-24
• Vue+Webpack开发可复用的单页面富应用教程（技巧篇） | Aresn | 2016-07-24
• 用vue+webpack搭建的前端项目结构 | 对角另一面 | 2016-10-19

🎓 webpack & Angular

• [译]使用webpack2实现Angular懒加载 | damienbod | 2017
• Webpack + Angular的组件化实践 | 王伟嘉 | 2015-10-27
• [译] 通过 Webpack 实现 AngularJS 的延迟加载 | Cheng_Gu | 2016-03-01
• es6+angular1.X+webpack 实现按路由功能打包项目 | yang_j_j | 2016-01-24
• angular-webpack-cookbook | dmachat | 2016

🎓 webpack 原理与开发

📕 原理及源码分析

• 细说 webpack 之流程篇 | 七珏 | 2016-09-09
• webpack编译流程漫谈 | slashhuang | 2016-08-16
• happypack 原理解析 | 上坡 | 2016-12-08
• webpack 源码解析 | 李黄河 | 2016-05-30
• Webpack 源码（一）—— Tapable 和 事件流 | JSCON简时空 | 2016-01-09
• webpack源码分析（一）— Tapable插件架构 | 小虫巨蟹 | 2016-09-25
• Tapable中文文档 | 小虫巨蟹 | 2016-09-23
• Webpack 源码（二）—— 如何阅读源码 | JSCON简时空 | 2016-01-09
• webpack 学习（二） | dear-lizhihua | 2017-02-01
• 关于 webpack 你所忽略的细节（附源码分析） | TaoBeier | 2016-12-26
• Webpack Tutorial: Understanding How it Works | Sean Landsman | 2017-02-01
• webpack源码学习系列之一：如何实现一个简单的webpack | youngwind | 2017-02-04
• webpack源码学习系列之二：code-splitting（代码切割） | youngwind | 2017-02-11
• webpack源码学习系列之三：loader 机制 | youngwind | 2017-02-28
• 玩转webpack（一）：webpack的基本架构和构建流程 | lxzjj | 2017-11-02
• 玩转webpack（二）：webpack的核心对象 | lxzjj | 2017-11-08
• webpack Tapable-2.0 源码分析 | theniceangel | 2018-12-15
• [万字总结] 一文吃透 Webpack 核心原理 | Tecvan | 2021-04-09
• [源码解读] Webpack 插件架构深度讲解 | Tecvan | 2021-04-27
• 理解webpack原理，手写一个100行的webpack | 夏季有风 | 2019-04-27
• Webpack HMR 原理解析 | 冉四夕 | 2017-11-08
• AST 与前端工程化实战 | qiangdada | 2019-08-23

📕 Plugin 及 Loader 开发

• 如何开发一个 Webpack Loader ( 一 ) | joeyguo | 2016-05-14
• 如何写一个webpack插件（一） | leehey | 2016-01-09
• ✏️ loader知识分享 | 字节前端 | 2021-04-12
• 【Webpack进阶】Loader深入解析 | 维斯特蓝 | 2021-03-27
• 手把手教你撸一个 Webpack Loader | iKcamp | 2018-01-25

📕 生成代码分析

• 简要分析webpack打包后代码 | wjkang | 2016-09-04
• webpack2生成代码分析 | leehey | 2016-10-26
• 从 Bundle 文件看 Webpack 模块机制 | 叶伟伟 | 2017-03-24

📕 使用 webpack 编写 npm 包

• [译] 基于 Webpack 和 ES6 打造 JavaScript 类库 | cssmagic | 2016-01-14
• 现代前端库开发指南系列（二）：使用 webpack 构建一个库 | array_huang | 2019-12-16

📕 其它

• webpack不适合多页面应用？你写的插件还不够多 | 小虫巨蟹 | 2016-09-20
• [webpack]源码解读：命令行输入webpack的时候都发生了什么？ | zyf394 | 2017-01-04
• 详解Webpack2的那些路径 | 前端路迹 | 2017-03-20
• webpack 中那些最易混淆的 5 个知识点 | 卤蛋实验室 | 2019-05-29

🎓 webpack 其它

• 告别无聊的 Webpack 控制台介面 | Sebastian Blade | 2016-09-26
• Fis3构建迁移Webpack之路 | Lewis Cheng | 2017-11

webpack 优秀 starter kit

如有好的starter kit, 请到此issue里提交章，或者直接发pull request.

📦 webpack & react

• react-starter-kit | bodyno | 2016
• steamer-react | leehey | 2016
• rekit | supnate | 2016
• gt-react-scaffold | vivaxy | 2017

📦 webpack & angular1/2

• angular2-webpack-starter | AngularClass| 2017
• angular2-webpack2-starter | qdouble | 2017
• angular2-webpack | preboot | 2017
• NG6-starter (angular1.x) | AngularClass| 2016

📦 webpack & vue

• vue2-elm | bailicangdu| 2017

webpack 中文文档

https://doc.webpack-china.org/

• 教你如何读webpack2中文文档

Credit To

webpack-tutorial-collection