居玉皓

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

第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