内容简介

随着Web开发技术的发展，Webpack凭借其便于使用和涵盖面广的优势，成为目前非常流行的前端构建工具，是每位前端工程师的必备技能之一。

《深入浅出Webpack》对Webpack进行了全面讲解，涵盖了Webpack入门、配置、实战、优化、原理等方面的内容。其中，第1章讲解Webpack入门所涉及的知识；第2章详细讲解Webpack提供的常用配置项；第3章结合实际项目中的常见场景进行实践；第4章给出优化Webpack的优秀方案；第5章剖析了Webpack的原理，并讲解如何开发Plugin和Loader；附录汇总了常见的Loader、Plugin和Webpack的其他学习资源。除了深入讲解Webpack，本书还介绍了ES6、TypeScript、PostCSS、Prepack、离线缓存、单页应用、CDN等Web开发相关的技能。

无论是对 Webpack一无所知的初学者，还是经验丰富的前端工程师，相信都能够通过《深入浅出Webpack》进一步提升对Webpack的理解，并在Web开发中更熟练地运用Webpack。

作者简介

吴浩麟

一线前端工程师，曾就职于腾讯，现就职于美团。专注于Web开发，参与过众多大型Web项目的构建、设计和开发，喜欢探索Web前沿技术。也是Golang和音视频技术的爱好者，活跃于GitHub，ID为gwuhaolin。

目录

第1章  入门  1

1.1  前端的发展  2

1.1.1  模块化  2

1.1.2  新框架  5

1.1.3  新语言  6

1.2  常见的构建工具及对比  8

1.2.1  Npm Script  9

1.2.2  Grunt  10

1.2.3  Gulp  11

1.2.4  Fis3  12

1.2.5  Webpack  14

1.2.6  Rollup  15

1.2.7  为什么选择Webpack  16

1.3  安装Webpack  17

1.3.1  安装Webpack到本项目  17

1.3.2  安装Webpack到全局  18

1.3.3  使用Webpack  18

1.4  使用Loader  20

1.5  使用Plugin  22

1.6  使用DevServer  24

1.6.1  实时预览  25

1.6.2  模块热替换  26

1.6.3  支持Source Map  26

1.7  核心概念  27

第2章  配置  29

2.1  Entry  30

2.1.1  context  30

2.1.2  Entry类型  31

2.1.3  Chunk的名称  31

2.1.4  配置动态Entry  32

2.2  Output  32

2.2.1  filename  32

2.2.2  chunkFilename  33

2.2.3  path  34

2.2.4  publicPath  34

2.2.5  crossOriginLoading  34

2.2.6  libraryTarget 和 library  35

2.2.7  libraryExport  37

2.3  Module  38

2.3.1  配置Loader  38

2.3.2  noParse  40

2.3.3  parser  41

2.4  Resolve  41

2.4.1  alias  42

2.4.2  mainFields  42

2.4.3  extensions  43

2.4.4  modules  43

2.4.5  descriptionFiles  44

2.4.6  enforceExtension  44

2.4.7  enforceModuleExtension  44

2.5  Plugin  44

2.6  DevServer  45

2.6.1  hot  45

2.6.2  inline  46

2.6.3  historyApiFallback  46

2.6.4  contentBase  47

2.6.5  headers  48

2.6.6  host  48

2.6.7  port  48

2.6.8  allowedHosts  48

2.6.9  disableHostCheck  49

2.6.10  https  49

2.6.11  clientLogLevel  50

2.6.12  compress  50

2.6.13  open  50

2.7  其他配置项  50

2.7.1  Target  50

2.7.2  Devtool  51

2.7.3  Watch和WatchOptions  51

2.7.4  Externals  52

2.7.5  ResolveLoader  53

2.8  整体配置结构  54

2.9  多种配置类型  58

2.9.1  导出一个Function  58

2.9.2  导出一个返回Promise的函数  59

2.9.3  导出多份配置  60

2.10  总结  61

第3章  实战  62

3.1  使用ES6语言  63

3.1.1  认识Babel  63

3.1.2  接入Babel  67

3.2  使用TypeScript语言  67

3.2.1  认识TypeScript  67

3.2.2  减少代码冗余  69

3.2.3  集成Webpack  69

3.3  使用Flow检查器  70

3.3.1  认识Flow  70

3.3.2  使用Flow  71

3.3.3  集成Webpack  72

3.4  使用SCSS语言  73

3.4.1  认识SCSS  73

3.4.2  接入Webpack  74

3.5  使用PostCSS  75

3.5.1  认识PostCSS  75

3.5.2  接入Webpack  76

3.6  使用React框架  77

3.6.1  React的语法特征  77

3.6.2  React与Babel  78

3.6.3  React与TypeScript  79

3.7  使用Vue框架  80

3.7.1  认识Vue  81

3.7.2  接入Webpack  82

3.7.3  使用TypeScript编写Vue应用  83

3.8  使用Angular2框架  85

3.8.1  认识Angular2  85

3.8.2  接入Webpack  88

3.9  为单页应用生成HTML  89

3.9.1  引入问题  89

3.9.2  解决方案  90

3.10  管理多个单页应用  94

3.10.1  引入问题  94

3.10.2  解决方案  96

3.11  构建同构应用  100

3.11.1  认识同构应用  100

3.11.2  解决方案  101

3.12  构建Electron应用  105

3.12.1  认识Electron  105

3.12.2  接入Webpack  108

3.13  构建Npm模块  110

3.13.1  认识Npm  110

3.13.2  抛出问题  111

3.13.3  使用Webpack构建Npm模块  112

3.13.4  发布到Npm  117

3.14  构建离线应用  118

3.14.1  认识离线应用  118

3.14.2  认识Service Workers  119

3.14.3  接入Webpack  124

3.14.4  验证结果  126

3.15  搭配Npm Script  128

3.15.1  认识Npm Script  128

3.15.2  Webpack为什么需要Npm Script  129

3.16  检查代码  130

3.16.1  代码检查具体是做什么的  130

3.16.2  怎么做代码检查  131

3.16.3  结合Webpack检查代码  133

3.17  通过Node.js API启动Webpack  136

3.17.1  安装和使用Webpack模块  136

3.17.2  以监听模式运行 137

3.18  使用Webpack Dev Middleware  138

3.18.1  Webpack Dev Middleware支持的配置项  139

3.18.2  Webpack Dev Middleware与模块热替换  140

3.19  加载图片  142

3.19.1  使用file-loader  142

3.19.2  使用url-loader  143

3.20  加载SVG  145

3.20.1  使用raw-loader  146

3.20.2  使用svg-inline-loader  147

3.21  加载Source Map  148

3.21.1  该如何选择  150

3.21.2  加载现有的Source Map  150

3.22  实战总结  151

第4章  优化  153

4.1  缩小文件的搜索范围  154

4.1.1  优化Loader配置  154

4.1.2  优化resolve.modules配置  155

4.1.3  优化resolve.mainFields配置  156

4.1.4  优化resolve.alias配置  157

4.1.5  优化resolve.extensions配置  159

4.1.6  优化module.noParse配置  159

4.2  使用DllPlugin  160

4.2.1  认识DLL  160

4.2.2  接入Webpack  161

4.3  使用HappyPack  166

4.3.1  使用HappyPack  167

4.3.2  HappyPack的原理  170

4.4  使用ParallelUglifyPlugin  170

4.5  使用自动刷新  173

4.5.1  文件监听  173

4.5.2  自动刷新浏览器  176

4.6  开启模块热替换  180

4.6.1  模块热替换的原理  180

4.6.2  优化模块热替换  184

4.7  区分环境  186

4.7.1  为什么需要区分环境  186

4.7.2  如何区分环境  186

4.7.3  结合UglifyJS  188

4.7.4  第三方库中的环境区分  188

4.8  压缩代码  189

4.8.1  压缩JavaScript  190

4.8.2  压缩ES6  192

4.8.3  压缩CSS  193

4.9  CDN加速  195

4.9.1  什么是CDN  195

4.9.2  接入CDN  196

4.9.3  用Webpack实现CDN的接入  198

4.10  使用Tree Shaking  200

4.10.1  认识Tree Shaking  200

4.10.2  接入Tree Shaking  201

4.11  提取公共代码  204

4.11.1  为什么需要提取公共代码  204

4.11.2  如何提取公共代码  205

4.11.3  如何通过Webpack提取公共代码  206

4.12  分割代码以按需加载  209

4.12.1  为什么需要按需加载  209

4.12.2  如何使用按需加载  209

4.12.3  用Webpack实现按需加载  210

4.12.4  按需加载与ReactRouter  212

4.13  使用Prepack  215

4.13.1  认识Prepack  215

4.13.2  接入Webpack  216

4.14  开启Scope Hoisting  217

4.14.1  认识Scope Hoisting  217

4.14.2  使用Scope Hoisting  218

4.15  输出分析  219

4.15.1  官方的可视化分析工具  220

4.15.2 webpack-bundle-analyzer  224

4.16  优化总结  226

第5章  原理  233

5.1  工作原理概括  234

5.1.1  基本概念  234

5.1.2  流程概括  234

5.1.3  流程细节  235

5.2  输出文件分析  238

5.3  编写Loader  245

5.3.1  Loader的职责  246

5.3.2  Loader基础  247

5.3.3  Loader进阶  247

5.3.4  其他Loader API  250

5.3.5  加载本地Loader  251

5.3.6  实战  253

5.4  编写Plugin  254

5.4.1  Compiler和Compilation  255

5.4.2  事件流  256

5.4.3  常用的API  257

5.4.4  实战  261

5.5  调试Webpack  262

5.6  原理总结  265

附录A  常用的Loader  266

附录B  常用的Plugin  270

附录C  Webpack的其他学习资源  273

文档截图