深入浅出Webpack

出版者:电子工业出版社

作者:吴浩麟

页数:288

出版时间:2018-1

价格:79

装帧:平装

isbn号码:9787121331725

具体描述

随着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
· · · · · · (收起)

读后感

说说我花钱买作者实体书后的感受吧： 相信作者初衷还是好的。我是一个新学webpack的小白，实体书出来我就买的，奔着网上说的国内第一本介绍webpack的宣传去买的。 结果才买来没几个月，我就发现作者在gitbook上免费把这本书公开了，当时感觉有点。。。，那我当初花好几十是何...  

在没看本书前，我花了三、五个小时才弄清楚相当本书第一章的内容，何以如此呢？ 因为我首先的以为webpack能直接合并css文件，不停地试验“entry:'./main.css'”之类，折腾许久才发现，原来这个工具本意只是处理.js的， 我想这种直觉想法并不算太奇特，可以检索到许多类似的提问...

在没看本书前，我花了三、五个小时才弄清楚相当本书第一章的内容，何以如此呢？ 因为我首先的以为webpack能直接合并css文件，不停地试验“entry:'./main.css'”之类，折腾许久才发现，原来这个工具本意只是处理.js的， 我想这种直觉想法并不算太奇特，可以检索到许多类似的提问...

在没看本书前，我花了三、五个小时才弄清楚相当本书第一章的内容，何以如此呢？ 因为我首先的以为webpack能直接合并css文件，不停地试验“entry:'./main.css'”之类，折腾许久才发现，原来这个工具本意只是处理.js的， 我想这种直觉想法并不算太奇特，可以检索到许多类似的提问...

说说我花钱买作者实体书后的感受吧： 相信作者初衷还是好的。我是一个新学webpack的小白，实体书出来我就买的，奔着网上说的国内第一本介绍webpack的宣传去买的。 结果才买来没几个月，我就发现作者在gitbook上免费把这本书公开了，当时感觉有点。。。，那我当初花好几十是何...  

用户评价

这本书的阅读门槛设置得相当精妙，它仿佛为你筑起了一道坚实的桥梁，将初级前端工程师的经验与高级架构师的视野连接起来。我曾尝试阅读一些号称是“权威指南”的同类书籍，但往往在看到一半时，就因为过度技术化而感到气馁。但这本《深入浅出Webpack》却始终保持着一种平易近人的姿态，即便是初次接触构建工具的读者，也能循着作者的思路逐步深入。书中对“最佳实践”的阐述尤为关键，它不仅仅告诉你如何配置才能跑起来，更重要的是，它指导你如何配置才能**健壮、可维护、高性能**地运行起来。例如，在处理环境配置分离和热更新机制的细节上，作者的描述非常细致，并且附带了非常清晰的架构图，使得原本模糊不清的内部工作流程变得可视化。这本书的价值在于，它教会你如何思考，而不是仅仅复制粘贴代码片段。

我拿到这本书时，最大的担忧是怕它过于陈旧，毕竟前端技术栈的更新速度是出了名的快。然而，事实证明，作者在内容的前瞻性和时效性上做得极为出色。书中对最新特性，比如模块联邦（Module Federation）的探讨，并没有仅仅停留在官方文档的翻译层面，而是结合了实际生产环境中的部署挑战和最佳实践进行了深入的剖析。这种结合了理论深度与实战经验的叙述方式，极大地提升了内容的价值。更值得称赞的是，作者在讲解复杂概念时，总是能巧妙地运用对比论证的方法，将不同的配置项、不同的加载器（Loader）之间的差异和适用场景描绘得淋漓尽致，避免了初学者在面对众多选项时产生的选择困难。这本书像是一本耐磨的工具箱，里面的工具虽然都是尖端技术，但被整理得井井有条，你知道在任何时候都能从中找到最合适的那一把“瑞士军刀”。

如果要用一个词来概括我的阅读感受，那一定是“结构感”。这本书的章节安排，就像是精心绘制的建筑蓝图，逻辑层层递进，浑然一体。从基础的入口与出口定义，到中间件的装载与执行顺序，再到输出产物的优化与定制，每一步都衔接得天衣无缝。我特别欣赏作者在讲解插件（Plugin）系统时所展现出的洞察力，他不仅解释了生命周期钩子的作用，更重要的是，引导读者去思考如何利用这些钩子实现自定义的构建逻辑，这极大地拓宽了我们对构建工具扩展性的认知。对于一个正在面临从小型项目向中大型项目迁移的团队而言，这本书提供的不仅仅是技术方案，更是一套可复用的工程化治理思路。读完之后，你会有一种强烈的自信感，感觉自己不再是被动地接受技术框架，而是真正掌握了驾驭构建流程的主动权，这本书的实用价值和启发意义无可估量。

这本关于前端构建工具的著作，从宏观的视角切入，为我们描绘了一个清晰而引人入胜的构建流程图景。作者在开篇便展现了深厚的行业洞察力，没有陷入技术细节的泥沼，而是先搭建起一个坚实的概念框架。我尤其欣赏其对于“模块化思维”的阐释，这不仅仅是关于代码层面的组织，更是一种解决复杂系统问题的哲学思考。书中对不同构建工具演进历史的梳理，也让我对当前Webpack的地位有了更深刻的理解。它并非凭空出现，而是踩在前人肩膀上的技术结晶。阅读过程中，我能感受到作者试图引导读者从“工具的使用者”转变为“构建系统的设计者”，这种思维上的拔高，对于那些希望在职业生涯中更进一步的开发者来说，无疑是宝贵的财富。整本书的叙事节奏张弛有度，即便是一些相对抽象的概念，也能通过生动的比喻和恰当的图示变得易于理解，整体阅读体验非常流畅，像是在听一位经验丰富的导师娓娓道来，让人对下一步的学习内容充满期待。

坦白说，这本书的深度和广度确实超出了我的预期，它不仅仅停留在配置文件的罗列上，更像是一本关于“前端工程化思想”的教科书。最令我震撼的是关于性能优化那一章节的处理方式。作者并没有简单地堆砌各种优化技巧，而是深入剖析了打包体积、加载时间背后的浏览器工作原理和网络传输机制。每一个优化点，无论是Tree Shaking 还是 Code Splitting，都被置于一个更宏大的性能优化体系中进行讲解，这使得我们理解“为什么这样做”远比“怎么做”来得更为扎实。书中的案例选取也非常贴合实际项目中的痛点，很多我在线上项目中遇到的疑难杂症，都能在书中找到理论支撑和解决方案的雏形。对于那些只停留在使用脚手架工具的开发者来说，这本书提供了一个难得的机会，让他们能够真正“掌控”自己的构建流程，理解每一个环节对最终产品质量的影响，这是一种由内而外的赋能。

webpack源码值得一读

还是很不错的，全面，比较通用的东西，就算Webpack升级到4了也不过时

整体说来讲的还是不错的，简化的API,适合通读一遍

刚好够现在用????

回想起学webpack只有官方文档的日子...