Webpack实战：入门、进阶与调优第2版 pdf下载

适读人群 ：本书的读者对象包括两类人：初中级前端开发者：这是本书的核心对象，通过本书可以学习到如何使用 Webpack 构建前端工程。从事前端工程化方面工作的开发者：通过本书可以学习到如何优化 Webpack 配置来更好地进行构建，提升开发效率。

（1）作者是资深前端技术专家，知名开源打包工具YKit主导者和核心开发者，Webpack技术布道者

（2）第1版是前端领域畅销书，深受读者好评，被认为是Webpack领域的标准性著作

（3）从功能特性、工作原理、性能优化、项目实战4个维度全面展开，提供示例代码

这是一本讲解如何使用Webpack构建现代Web应用的著作。第1版豆瓣评分8.6，好评率近99.9%，是前端领域的畅销书，被读者公认为是Webpack领域的标准性著作。

全书围绕Webpack的功能特性、工作原理、性能优化、项目实战4个维度全面展开，从基本的使用场景到复杂的应用实例，再到系统性的优化，由浅入深讲解Webpack的各个特性，同时剖析其背后的工作原理，让读者能零基础快速掌握Webpack并轻松实现进阶。

作者是资深的前端技术专家，是知名开源打包工具YKit的主导者和核心开发者，也是Webpack坚定不移的布道者。本书内容全部来自作者的实战经验，尽量避开了网络上已经发表的各种公开资料，思路简洁、深入，原理与实操并重。

与第1版相比，第2版做了如下更新：
（1）结合Webpack新技术，对全书内容进行了全面更新；
（2）收集并分析了读者对第1版的反馈，完善了第1版的不足之处；
（3）新增了分析Webpack打包原理的章节；
（4）新增了2个关于React和Vue的综合案例。
相比第1版，第2版内容更新、更全、更深入，实战性更强。

居玉皓

资深前端开发工程师，目前就职于美国在线流媒体平台Tubi TV，曾就职于去哪儿网，负责前端基础架构的建设，并主导开发了知名的开源打包工具YKit。
长期专注于前端构建领域，对Webpack有深入的研究，积累了丰富的实践经验，在国内为Webpack的发展和普及做了较多的努力和贡献。

工欲善其事，必先利其器，一个稳定、高效的构建工具能帮助开发者大幅提升效率，Webpack就是Web开发人员的利器。本书从Webpack的核心概念开始，由浅入深地对其进行了全面系统的介绍。不仅从原理层面讲解了Webpack的工作机制、各项特性，还辅以各种场景下的实战案例，能帮助读者更好地将Webpack应用在实际的工程中。
——马骥 车好多集团前端研发部技术总监

YKit是去哪儿的开源项目，是Webpack在构建领域的优秀实践。玉皓是YKit的核心开发工程师，由他来写Webpack方面的书是非常合适的。本书聚焦在Webpack及上下游的必要知识点上，Webpack机制和周边常用工具模块讲得比较透彻，简单易懂，从实战角度对代码分割、HMR、plugin、loader等进行了分析。本书非常适合想深入学习Webpack的读者。
——狼叔（网名i5ting） Node.js布道者/Node全栈公众号作者

严谨、认真、细心、极客是玉皓的标签。几年来，他在前端构建领域倾注了非常多的精力，并打造出了YKit这样一个覆盖“去哪儿”全业务线的前端利器，并将其开源。本书很好地承载了玉皓的丰富经验，毫无保留地将Webpack的魅力向大家娓娓道来。我相信任何前端从业者通过阅读此书，都能看到Webpack的全貌，并将之应用到实践之中。它像是一个领路者，非常精巧地帮助大家快速迈过学习的障碍。
——杜瑶 原去哪儿网高级技术总监/美团研究员

Webpack是前端领域应用最广泛的构建工具，但是由于配置和特性过于庞杂导致学习成本高。本书作者结合自己的实战经验，化繁为简，结合实际生产环境，对Webpack的功能特性、工作原理、性能优化等进行了有针对性地讲解，相信它能帮助你更好地学习和使用Webpack，达到事半功倍的效果。
——刘江虹 字节跳动抖音电商前端架构师/《Koa开发：入门、进阶与实战》作者

第1章　Webpack简介1

1.1　何为Webpack1

1.2　为什么需要Webpack2

1.2.1　何为模块2

1.2.2　JavaScript中的模块3

1.2.3　模块打包工具4

1.2.4　为什么选择Webpack5

1.3　安装5

1.4　打包第一个应用7

1.4.1　Hello World7

1.4.2　使用npm scripts9

1.4.3　使用默认目录配置10

1.4.4　使用配置文件10

1.4.5　webpack-dev-server13

1.5　本章小结15

第2章　　模块打包17

2.1　CommonJS17

2.1.1　模块18

2.1.2　导出18

2.1.3　导入20

2.2　ES6 Module22

2.2.1　模块22

2.2.2　导出23

2.2.3　导入24

2.2.4　复合写法26

2.3　CommonJS与ES6 Module的区别26

2.3.1　动态与静态26

2.3.2　值复制与动态映射27

2.3.3　循环依赖29

2.4　加载其他类型的模块33

2.4.1　非模块化文件34

2.4.2　AMD34

2.4.3　UMD35

2.4.4　加载npm模块37

2.5　模块打包原理38

2.6　本章小结41

第3章　资源的输入和输出42

3.1　资源处理流程42

3.2　配置资源入口44

3.2.1　context44

3.2.2　entry45

3.2.3　实例47

3.3　配置资源出口50

3.3.1　filename50

3.3.2　path53

3.3.3　publicPath54

3.3.4　实例56

3.4　本章小结57

第4章　预处理器59

4.1　一切皆模块59

4.2　loader概述61

4.3　loader的配置63

4.3.1　loader的引入63

4.3.2　链式loader65

4.3.3　loader options65

4.3.4　更多配置66

4.4　常用loader介绍70

4.4.1　babel-loader70

4.4.2　ts-loader72

4.4.3　html-loader73

4.4.4　handlebars-loader73

4.4.5　file-loader74

4.4.6　url-loader77

4.5　自定义loader78

4.6　本章小结82

第5章　样式处理83

5.1　分离样式文件83

5.1.1　extract-text-webpack-plugin84

5.1.2　多样式文件的处理86

5.1.3　mini-css-extract-plugin88

5.2　样式预处理90

5.2.1　Sass与SCSS90

5.2.2　Less92

5.3　PostCSS93

5.3.1　PostCSS与Webpack93

5.3.2　自动前缀94

5.3.3　stylelint95

5.3.4　CSSNext96

5.4　CSS Modules98

5.5　本章小结99

第6章　代码分片100

6.1　通过入口划分代码100

6.2　CommonsChunkPlugin101

6.2.1　提取vendor104

6.2.2　设置提取范围105

6.2.3　设置提取规则106

6.2.4　hash与长效缓存108

6.2.5　CommonsChunkPlugin的不足110

6.3　optimization.SplitChunks111

6.3.1　从命令式到声明式113

6.3.2　默认的异步提取114

6.3.3　配置115

6.4　资源异步加载116

6.4.1　import()116

6.4.2　异步chunk的配置119

6.5　本章小结120

第7章　生产环境配置121

7.1　环境配置的封装121

7.2　开启production模式123

7.3　环境变量124

7.4　source-map125

7.4.1　source-map原理125

7.4.2　source-map配置126

7.4.3　source-map安全128

7.5　资源压缩129

7.5.1　压缩JavaScript129

7.5.2　压缩CSS131

7.6　缓存132

7.6.1　资源hash132

7.6.2　输出动态HTML133

7.6.3　使chunk id更稳定135

7.7　bundle体积监控和分析137

7.8　本章小结139

第8章　打包优化140

8.1　HappyPack140

8.1.1　工作原理141

8.1.2　单个loader的优化141

8.1.3　多个loader的优化143

8.2　缩小打包作用域144

8.2.1　exclude和include144

8.2.2　noParse145

8.2.3　IgnorePlugin146

8.2.4　缓存146

8.3　动态链接库与DllPlugin148

8.3.1　vendor配置149

8.3.2　vendor打包150

8.3.3　链接到业务代码151

8.3.4　潜在问题151

8.4　去除死代码153

8.4.1　ES6 Module154

8.4.2　使用Webpack进行依赖关系构建154

8.4.3　使用压缩工具去除死代码155

8.5　本章小结155

第9章　开发环境调优156

9.1　Webpack开发效率插件156

9.1.1　webpack-dashboard156

9.1.2　webpack-merge158

9.1.3　speed-measure-webpack-plugin161

9.1.4　size-plugin161

9.2　模块热替换163

9.2.1　开启HMR163

9.2.2　HMR原理165

9.2.3　HMR API示例167

9.3　本章小结169

第10章　Webpack打包机制170

10.1　总览170

10.2　准备工作171

10.3　缓存加载173

10.4　模块打包176

10.4.1　Compiler176

10.4.2　Compilation178

10.4.3　Resolver179

10.4.4　Module Factory180

10.4.5　Parser181

10.4.6　模板渲染183

10.5　深入Webpack插件184

10.5.1　Tapable185

10.5.2　插件的协同模式187

10.6　本章小结191

第11章　实战案例192

11.1　React应用192

11.1.1　基础配置192

11.1.2　JavaScript处理195

11.1.3　TypeScript处理197

11.1.4　样式处理199

11.1.5　静态资源201

11.1.6　多页应用公共代码优化202

11.1.7　长效缓存205

11.2　Vue应用206

11.2.1　手动搭建Vue项目206

11.2.2　通过@vue/cli搭建项目212

11.3　本章小结214

第12章　更多JavaScript打包工具215

12.1　Rollup215

12.1.1　配置216

12.1.2　Rollup去除死代码217

12.1.3　可选的输出格式218

12.1.4　使用Rollup构建JavaScript库219

12.2　Parcel219

12.2.1　打包速度220

12.2.2　零配置222

12.3　 esbuild224

12.3.1　打包速度224

12.3.2　缺陷225

12.4　Vite225

12.4.1　取长补短225

12.4.2　打包流程优化226

12.5　打包工具的发展趋势227

12.5.1　性能与通用性227

12.5.2　配置极小化与工程标准化227

12.5.3　WebAssembly228

12.6　本章小结229

曾经有一段时间我负责公司内部基础架构方面的工作，也因此得以接触各个项目组的同事，并经常听到他们抱怨：“为什么Webpack这么慢？”“为什么Webpack又出错了？” “发布到线上的代码为什么不能正常工作？”我切身体会到，一个稳定、高效的构建工具能帮助开发者大幅提升效率，但很多时候效率问题是无法通过简单地在网上搜索一下就解决的。尽管Webpack作为构建工具已经在开发者社区中被广泛使用了很多年，网络上也有不少关于它的资料、教程和文档，然而想要把它配置好并不是一件容易的事情。

写本书第1版的最初目的就是想通过尽可能简单直白的语言将我对Webpack的理解和经验讲出来。在编写过程中，我努力回忆了从第一次使用Webpack到现在我所遇到的磕磕绊绊，希望能让读者少踩些坑。同时我也结合了很多个人对构建工具的思考—我们为什么需要构建工具、它解决了什么问题、它的未来发展趋势是怎样的。很多时候我们只倾向于解决眼前的问题，较少思考背后的原因，而当我们带着思考去审视时，很多问题也就迎刃而解了。

本书是第2版，结合了第1版的读者反馈，并新增了两章，分别介绍Webpack的运行原理和项目实战。另外第2版也对Webpack新增的特性进行了相应的补充。

在这里，我要对机械工业出版社杨福川和李艺两位编辑表示特别的感谢。

【本书内容】

本书共12章。第1章是导引，有一定Webpack基础的读者可以选择略过。第2章梳理了模块的概念。第3～7章介绍了Webpack的各项基础特性和使用场景。第8章和第9章则介绍了进一步的优化方法以及一些高级的使用方法。第10章介绍了Webpack内部的运行机制。第11章介绍了项目实战。最后第12章介绍了除Webpack之外的打包工具并进行了对比。

【代码示例】

书中的重要代码示例整理在GitHub仓库中，方便读者在线查看：https://github.com/yuhaoju/webpack-config-handbook。