深入浅出Webpack
  • 推荐1
  • 收藏4
  • 浏览1.3K

深入浅出Webpack

吴浩麟 (作者) 

  • 书  号:978-7-121-33172-5
  • 出版日期:2018-01-01
  • 页  数:288
  • 开  本:16(185*235)
  • 出版状态:图书立项
  • 维护人:张国霞
纸质版 ¥79.00

相关图书

加密与解密(第4版)

段钢 (作者)

本书以软件逆向为切入点,讲述了软件安全领域相关的基础知识和技能。读者阅读本书后,很容易就能在逆向分析、漏洞分析、安全编程、病毒分析等领域进行扩展。这些知识点的相...

¥198.00

从零开始学架构:照着做,你也能成为架构师

李运华 (作者)

本书的内容主要包含以下几部分:<br>1) 架构设计基础,包括架构设计相关概念、历史、原则、基本方法,让架构设计不再神秘;<br>2) 架构设计流程,通过一个虚...

¥99.00

OpenResty完全开发指南:构建百万级别并发的Web应用

罗剑锋 (作者)

OpenResty是一个基于Nginx的高性能Web平台,能够方便地搭建处理超高并发的动态Web应用、Web服务和动态网关。 与现有的其他开发语言/环境相比,...

¥69.00

Kali Linux大揭秘

(美国)Raphael Hertzog,(美国)Jim O'Gorman (作者) 诸葛建伟 (译者)

Kali Linux是设计用于数字取证和渗透测试的操作系统,本书是官方出版的仅有的一本著作。讲述了如何上手、配置、安全加固、自定义、安全评估等概念。<br>在本...

¥89.00

Serverless架构:无服务器应用与AWS Lambda

Dr. Peter Sbarski? (作者) 覃宇 (译者)

无服务器是软件架构世界中的热门新话题,它充分利用大量的云平台服务,让开发者只需关注核心业务逻辑的实现。同时,它按需分配和使用资源的运行方式,在降低基础设施成本的...

¥108.00

Web安全攻防:渗透测试实战指南

徐焱 李文轩 王东亚 (作者)

  本书由浅入深、全面、系统地介绍了当前流行的高危漏洞的攻击手段和防御方法,并力求语言通俗易懂,举例简单明了,便于读者阅读、领会。结合具体案例进行讲解,可以让读...

¥89.00
随着Web开发技术的发展,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的理解,并在Web开发中更熟练地运用Webpack。
从最基本的入门使用到各种场景的应用再到深入优化以及编写扩展,全面涵盖各个层级读者所需要的webpack知识。
吴浩麟
一线前端工程师,曾就职于腾讯,现就职于美团。专注于Web开发,参与过众多大型Web项目的构建、设计和开发,喜欢探索Web前沿技术。也是Golang和音视频技术的爱好者,活跃于GitHub,ID为gwuhaolin。
Web 应用日益复杂,相关开发技术也百花齐放,这对前端构建工具提出了更高的要求。Webpack 从众多构建工具中脱颖而出,成为目前最流行的构建工具,也几乎成为目前前端开发里的必备工具之一,因此每位紧跟时代的前端工程师都应该掌握Webpack。
本书从实践出发,用简单易懂的例子带领读者快速入门Webpack,再结合实际工作中常用的场景给出实践案例,通过前3章的学习足以让我们解决工作中的常见问题;本书还介绍了如何优化构建的速度和输出,并解析了Webpack的工作原理,以及Plugin和Loader的编写方法,可帮助读者进一步学习Webpack。本书按照入门、配置、实战、优化和原理的路线层层深入,涵盖了Webpack的方方面面。
在编写本书时,Webpack已经迭代到了3.8.1版本,本书涵盖了对该版本的特性解析。由于Webpack从版本1到现在,其核心思想和API没有发生很大的变化,所以本书的大部分内容适用于Webpack的任何稳定版本,但部分实例代码只适用于最新版本。
本书的每一小节都会提供与之对应的完整项目代码,在每节的最后附有下载链接,它们都有详细的注释并且可以正常运行,我们可以在需要时下载这些代码。
在阅读本书前,我们需要掌握基本的Web开发技术,因为本书专注于Webpack,不会详细介绍其他不相关的内容。
在阅读本书时,如果遇到任何不明白的地方,则都可以在本书的GitHub项目主页上(https://github.com/gwuhaolin/dive-into-webpack)以提Issue的方式提出问题,作者将详细解答。

目录

第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

本书勘误

印次
  • 页码:134  •  行数:20  •  印次: 4

    将js改成ts

    张国霞 提交于 2018/6/19 11:05:01
    陈晓猛 确认于 2018/6/19 17:27:33
  • 页码:191  •  行数:1  •  印次: 4

    将false改成true

    张国霞 提交于 2018/6/19 11:05:40
    陈晓猛 确认于 2018/6/19 17:27:40
  • 页码:191  •  行数:4  •  印次: 4

    将false改成true

    张国霞 提交于 2018/6/19 11:06:02
    陈晓猛 确认于 2018/6/19 17:27:47

读者评论

  • 在哪下载啊????????

    精勾子老汉发表于 2018/6/27 18:37:16
    • github https://github.com/gwuhaolin/dive-into-webpack

      hyangteng发表于 2018/7/31 20:09:50

图书类别

相关博文

  • 从Npm Script到Webpack,6种常见的前端构建工具对比

    从Npm Script到Webpack,6种常见的前端构建工具对比

    管理员账号 2018-01-02

    小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。本文选自《深入浅出Webpac...

    管理员账号 2018-01-02
    931 0 0 0

推荐用户