深入浅出Webpack

Name: 深入浅出Webpack
ISBN: 9787121331725

吴浩麟电子工业出版社 · 中国2018年7月

4.0

字数: 5万字
章节数: 233
ISBN: 9787121331725

信息有误查询本书

内容简介

随着Web开发技术的发展，Webpack凭借其便于使用和涵盖面广的优势，成为目前非常流行的前端构建工具，是每位前端工程师的必备技能之一。__eol__本书对Webpack进行了全面讲解，涵盖了Webpack入门、配置、实战、优化、原理等方面的内容。

编辑推荐

《深入浅出Webpack》由资深前端工程师吴浩麟撰写，是一本系统讲解Webpack核心原理与实践应用的权威指南。本书并非简单的API文档罗列，而是从模块化演进的历史脉络切入，深刻剖析了Webpack作为现代前端工程化基石的设计哲学与实现机制。作者凭借在腾讯等一线互联网公司的丰富实战经验，将复杂的构建流程、Loader与Plugin原理、性能优化策略等抽象概念，通过清晰的逻辑图示和渐进式的代码示例层层展开，使读者不仅能“知其然”，更能“知其所以然”。书中对Tree Shaking、Code Splitting、持久化缓存等高级特性的解读尤为深入，并结合了Webpack 4与5版本的差异对比，具有很高的时效性与实用性。对于希望从前端“开发者”进阶为“工程架构师”的读者而言，这本书提供了不可或缺的理论支撑与最佳实践路径，能有效帮助读者构建坚实、可维护的前端工程体系。

适合谁读

适合

希望系统掌握Webpack原理，摆脱配置复制粘贴状态的中高级前端开发者
面临前端工程复杂度提升，需要优化构建性能与开发体验的团队技术负责人
对模块化、打包工具底层实现机制有浓厚兴趣，渴望深入理解前端工程化的学习者
需要将Webpack与微前端、SSR等现代架构方案结合应用的实践者

不适合

仅需快速上手完成简单项目构建，无深入原理学习需求的绝对初学者
期望获得大量现成脚手架和配置片段，对底层原理不感兴趣的纯实用主义者

阅读建议

建议按照章节顺序阅读，特别是前几章关于模块化历史的铺垫，有助于建立完整的知识图谱
阅读时务必动手实践书中的示例代码，并尝试用自己的项目进行对照和改造，理解会更深刻
可结合Webpack官方文档与本书互为补充，官方文档查API，本书则深入理解设计意图与底层逻辑

出版社简介

电子工业出版社中国 · 成立于 1982 年

电子工业出版社是一家以电子信息及相关领域为出版特色的综合性出版社。从库内三千余种图书来看，其出版方向覆盖编程设计、人工智能、计算机综合、财经、摄影与社科等门类，既关注技术前沿，也兼顾大众阅读。代表图书包括《因子投资：方法与实践》《x86汇编语言：从实模式到保护模式》《RISC-V开放架构设计之道》《人工智能：语音识别理解与实践》《相控阵雷达技术》《雷达目标特性》及《100个Go语言典型错误》等，多围绕技术方法与工程实践展开。作者资源方面，有石川、李忠、王晓波、大卫·帕特森、安德鲁·沃特曼、余子濠等中外作者。受公开资料所限，暂不展开更多出版特色。

版权信息
前言
第1章入门
1.1 前端的发展
1.1.1 模块化
1.1.2 新框架
1.1.3 新语言
1.2 常见的构建工具及对比
1.2.1 Npm Script
1.2.2 Grunt
1.2.3 Gulp
1.2.4 Fis3
1.2.5 Webpack
1.2.6 Rollup
1.2.7 为什么选择Webpack
1.3 安装Webpack
1.3.1 安装Webpack到本项目
1.3.2 安装Webpack到全局
1.3.3 使用Webpack
1.4 使用Loader
1.5 使用Plugin
1.6 使用DevServer
1.6.1 实时预览
1.6.2 模块热替换
1.6.3 支持Source Map
1.7 核心概念
第2章配置
2.1 Entry
2.1.1 con text
2.1.2 Entry类型
2.1.3 Chunk的名称
2.1.4 配置动态Entry
2.2 Output
2.2.1 filenam
2.2.2 chunkFilenam
2.2.3 path
2.2.4 publicPath
2.2.5 crossOriginLoadin
2.2.6 libraryTarget 和 library
2.2.7 libraryExpo
2.3 Module
2.3.1 配置Loader
2.3.2 noParse
2.3.3 parser
2.4 Resolve
2.4.1 alia
2.4.2 mainFields
2.4.3 extension
2.4.4 module
2.4.5 descriptionFile
2.4.6 enforceExtensio
2.4.7 enforceModuleExtension
2.5 Plugin
2.6 DevServer
2.6.1 ho
2.6.2 inline
2.6.3 historyApiFallback
2.6.4 contentBas
2.6.5 headers
2.6.6 hos
2.6.7 po
2.6.8 allowedHosts
2.6.9 disableHostCheck
2.6.10 https
2.6.11 clientLogLevel
2.6.12 compress
2.6.13 ope
2.7 其他配置项
2.7.1 Target
2.7.2 Devtoo
2.7.3 Watch和WatchOptions
2.7.4 External
2.7.5 ResolveLoade
2.8 整体配置结构
2.9 多种配置类型
2.9.1 导出一个Function
2.9.2 导出一个返回Promise的函数
2.9.3 导出多份配置
2.10 总结
第3章实战
3.1 使用ES6语言
3.1.1 认识Babel
3.1.2 接入Babel
3.2 使用TypeScript语言
3.2.1 认识TypeScript
3.2.2 减少代码冗余
3.2.3 集成Webpack
3.3 使用Flow检查器
3.3.1 认识Flow
3.3.2 使用Flow
3.3.3 集成Webpack
3.4 使用SCSS语言
3.4.1 认识SCSS
3.4.2 接入Webpack
3.5 使用PostCSS
3.5.1 认识PostCSS
3.5.2 接入Webpack
3.6 使用React框架
3.6.1 React的语法特征
3.6.2 React与Babel
3.6.3 React与TypeScript
3.7 使用Vue框架
3.7.1 认识Vue
3.7.2 接入Webpack
3.7.3 使用TypeScript编写Vue应用
3.8 使用Angular2框架
3.8.1 认识Angular2
3.8.2 接入Webpack
3.9 为单页应用生成HTML
3.9.1 引入问题
3.9.2 解决方案
3.10 管理多个单页应用
3.10.1 引入问题
3.10.2 解决方案
3.11 构建同构应用
3.11.1 认识同构应用
3.11.2 解决方案
3.12 构建Electron应用
3.12.1 认识Electron
3.12.2 接入Webpack
3.13 构建Npm模块
3.13.1 认识Npm
3.13.2 抛出问题
3.13.3 使用Webpack构建Npm模块
3.13.4 发布到Npm
3.14 构建离线应用
3.14.1 认识离线应用
3.14.2 认识Service Workers
3.14.3 接入Webpack
3.14.4 验证结果
3.15 搭配Npm Script
3.15.1 认识Npm Script
3.15.2 Webpack为什么需要Npm Script
3.16 检查代码
3.16.1 代码检查具体是做什么的
3.16.2 怎么做代码检查
3.16.3 结合Webpack检查代码
3.17 通过Node.js API启动Webpack
3.17.1 安装和使用Webpack模块
3.17.2 以监听模式运行
3.18 使用Webpack Dev Middleware
3.18.1 Webpack Dev Middleware支持的配置项
3.18.2 Webpack Dev Middleware与模块热替换
3.19 加载图片
3.19.1 使用file-loader
3.19.2 使用url-loader
3.20 加载SVG
3.20.1 使用raw-loader
3.20.2 使用svg-inline-loader
3.21 加载Source Map
3.21.1 该如何选择
3.21.2 加载现有的Source Map
3.22 实战总结
第4章优化
4.1 缩小文件的搜索范围
4.1.1 优化Loader配置
4.1.2 优化resolve.modules配置
4.1.3 优化resolve.mainFields配置
4.1.4 优化resolve.alias配置
4.1.5 优化resolve.extensions配置
4.1.6 优化module.noParse配置
4.2 使用DllPlugin
4.2.1 认识DLL
4.2.2 接入Webpack
4.3 使用HappyPack
4.3.1 使用HappyPack
4.3.2 HappyPack的原理
4.4 使用ParallelUglifyPlugin
4.5 使用自动刷新
4.5.1 文件监听
4.5.2 自动刷新浏览器
4.6 开启模块热替换
4.6.1 模块热替换的原理
4.6.2 优化模块热替换
4.7 区分环境
4.7.1 为什么需要区分环境
4.7.2 如何区分环境
4.7.3 结合UglifyJS
4.7.4 第三方库中的环境区分
4.8 压缩代码
4.8.1 压缩JavaScript
4.8.2 压缩ES6
4.8.3 压缩CSS
4.9 CDN加速
4.9.1 什么是CDN
4.9.2 接入CDN
4.9.3 用Webpack实现CDN的接入
4.10 使用Tree Shaking
4.10.1 认识Tree Shaking
4.10.2 接入Tree Shaking
4.11 提取公共代码
4.11.1 为什么需要提取公共代码
4.11.2 如何提取公共代码
4.11.3 如何通过Webpack提取公共代码
4.12 分割代码以按需加载
4.12.1 为什么需要按需加载
4.12.2 如何使用按需加载
4.12.3 用Webpack实现按需加载
4.12.4 按需加载与ReactRouter
4.13 使用Prepack
4.13.1 认识Prepack
4.13.2 接入Webpack
4.14 开启Scope Hoisting
4.14.1 认识Scope Hoisting
4.14.2 使用Scope Hoisting
4.15 输出分析
4.15.1 官方的可视化分析工具
4.15.2 webpack-bundle-analyzer
4.16 优化总结
第5章原理
5.1 工作原理概括
5.1.1 基本概念
5.1.2 流程概括
5.1.3 流程细节
5.2 输出文件分析
5.3 编写Loader
5.3.1 Loader的职责
5.3.2 Loader基础
5.3.3 Loader进阶
5.3.4 其他Loader APl
5.3.5 加载本地Loader
5.3.6 实战
5.4 编写Plugin
5.4.1 Compiler和Compilation
5.4.2 事件流
5.4.3 常用的APl
5.4.4 实战
5.5 调试Webpack
5.6 原理总结
附录A 常用的Loader
附录B 常用的Plugin
附录C Webpack的其他学习资源
反侵权盗版声明

常见问题

这本书适合Webpack 5吗？

本书基于Webpack 4撰写，但核心原理完全适用于Webpack 5。作者在关键概念处会提及版本差异，且书中所授的架构思想与调试方法具有长期价值。学习时建议同步查阅Webpack 5官方迁移指南。

需要多深的前端基础才能阅读？

读者需要具备一定的JavaScript和Node.js基础，并有过使用Webpack或类似工具的实际项目经验。对CommonJS、ES Module等模块化标准有基本了解会更顺畅。

这本书与看官方文档和网络教程最大的区别是什么？

最大的区别在于体系化的深度与连贯性。网络教程往往解决特定问题，官方文档侧重API说明。本书则从根源上梳理了Webpack为何如此设计，如何串联各个环节，帮助你形成可迁移的、应对复杂场景的系统性解决方案能力。

读者评论

查询本书

本站为索引目录：「全网查询」由您发起、在您的浏览器中运行，所列入口均指向第三方站点，请自行判断可用性。

作者简介

吴浩麟作者

吴浩麟是一位中文技术图书作者，目前公开资料有限，其已知代表作是《深入浅出Webpack》。从书名与常见分类来看，该书属于编程设计领域，围绕Webpack这一前端构建工具展开，面向希望理解并掌握前端工程化构建流程的读者。作者在写作中采取“深入浅出”的路线，注重把构建配置、模块打包等相对专门的技术内容以较易理解的方式呈现，兼顾入门读者与有一定实践经验的开发者。库内目前仅收录其作品一种，关于其个人经历、教育背景与职业身份等信息尚无从确认，因此本简介不涉及生平细节，仅就现有作品题材与写作取向作简要说明。