新書推薦：
《
逝去的武林（十周年纪念版 武学宗师 口述亲历 李仲轩亲历一九三零年代武人言行录）
》
售價：HK$
54.9
《
唐代冠服图志（百余幅手绘插画 图解唐代各类冠服 涵盖帝后 群臣 女官 士庶 军卫等 展现唐代社会风貌）
》
售價：HK$
87.4
《
知宋·宋代之科举
》
售價：HK$
99.7
《
那本书是（吉竹伸介与又吉直树 天才联动！）
》
售價：HK$
99.7
《
传播的跃迁：人工智能如何革新人类的交流
》
售價：HK$
110.9
《
纯粹·古代中国的历史与制度
》
售價：HK$
62.7
《
生活来来往往 别等来日方长 新版（伍佰：“讲好了这一辈子，再度重相逢。”别等，别遗憾！珍惜当下才是最好的解药）
》
售價：HK$
58.2
《
一个英国军事顾问眼中的二战
》
售價：HK$
277.8
|
| 編輯推薦： |
Webpack是前端开发的主流构建工具，Babel是转译ES6代码的通用解决方案。
1.业内专家新加坡StarVision区域项目经理Peter Xu和学而思网校原1对1前端负责人汪心旺联袂力荐。
2.本书适用于Webpack v5.0.0和Babel v7.0.0之后的版本，是针对零基础前端开发者讲解Webpack与Babel使用方法的图书。
3.本书对构建灵活的前端工程化架构，提升定制化的能力很有帮助。
|
| 內容簡介： |
这是一本针对零基础前端开发者讲解Webpack与Babel使用方法的图书。随着前端工程的不断发展，Webpack与Babel已成为前端开发的两大核心工具。目前，Webpack是前端开发的主流构建工具，Babel是转译ES6代码的通用解决方案。
本书由两大部分构成，部分介绍Webpack，第二部分介绍Babel。Webpack部分讲解了Webpack的安装、资源入口与出口、预处理器与插件的配置、开发环境与生产环境的配置、性能优化及构建原理等。Babel部分讲解了Babel入门知识、Babel的配置文件、预设与插件的选择、babel-polyfill的使用方法，以及@babel/preset-env和@babel/plugin-transform-runtime这两个核心配置项的使用方法，这一部分还会讲解Babel的原理及Babel插件的开发。后，在附录中介绍了Module Federation与微前端，以及Babel 8前瞻等内容。
本书主要使用的Webpack版本是v5.21.2，但对v5.0.0之后的版本都适用；主要使用的Babel版本是v7.13.10，但对v7.0.0之后的版本都适用。
|
| 關於作者： |
姜瑞涛
毕业于华北电力大学，五年前端开发经验。曾在好未来、用友担任高级前端开发工程师，参与过用友NC Cloud大型企业数字化平台和学而思网校1对1管理后台的开发。擅长工程化解决前端兼容性问题，在Babel的使用上有丰富经验。
|
| 目錄：
|
第1章 Webpack入门 1
1.1 Webpack简介 1
1.2 安装Webpack 5 3
1.2.1 安装Node.js 3
1.2.2 安装Webpack 4
1.2.3 全局安装与本地安装Webpack的区别 5
1.3 Webpack快速入门 6
1.3.1 Webpack的命令行打包 6
1.3.2 Webpack打包模式mode 9
1.3.3 Webpack的配置文件 9
1.4 Webpack预处理器 12
1.4.1 引入CSS文件 12
1.4.2 Webpack预处理器的使用 14
1.5 本章小结 16
第2章 Webpack资源入口与出口 18
2.1 模块化 19
2.1.1 JS模块化历史 20
2.1.2 ES6 Module 20
2.1.3 CommonJS 22
2.2 Webpack资源入口 23
2.2.1 Webpack基础目录context 24
2.2.2 Webpack资源入口entry 25
2.3 Webpack资源出口 27
2.3.1 Webpack的output.filename 28
2.3.2 Webpack的output.path 31
2.3.3 Webpack的output.publicPath 32
2.3.4 output.publicPath与资源访问路径 37
2.3.5 Webpack的output.chunkFilename 41
2.4 hash、fullhash、chunkhash和contenthash的区别 42
2.4.1 浏览器缓存 42
2.4.2 Webpack与hash算法 44
2.4.3 Webpack中hash、fullhash、chunkhash和contenthash的区别 44
2.5 本章小结 47
第3章 Webpack预处理器 48
3.1 预处理器的配置与使用 49
3.1.1 预处理器的关键配置项 49
3.1.2 exclude和include 50
3.1.3 其他预处理器写法 51
3.2 Babel预处理器babel-loader 52
3.2.1 引入问题 53
3.2.2 直接使用Webpack 53
3.2.3 使用babel-loader 54
3.3 文件资源预处理器file-loader 57
3.3.1 file-loader处理JS引入的图片 57
3.3.2 file-loader处理CSS引入的图片 60
3.3.3 file-loader的其他知识 62
3.4 增强版文件资源预处理器url-loader 62
3.4.1 url-loader的Base64编码 62
3.4.2 file-loader与url-loader处理后的资源名称 66
3.4.3 file-loader与url-loader处理后的资源路径 66
3.5 本章小结 68
第4章 Webpack插件 69
4.1 插件简介 69
4.2 清除文件插件clean-webpack-plugin 71
4.2.1 clean-webpack-plugin简介 71
4.2.2 安装clean-webpack-plugin 71
4.2.3 使用clean-webpack-plugin 71
4.3 复制文件插件copy-webpack-plugin 72
4.3.1 copy-webpack-plugin简介 72
4.3.2 安装copy-webpack-plugin 73
4.3.3 使用copy-webpack-plugin 73
4.4 HTML模板插件html-webpack-plugin 74
4.4.1 html-webpack-plugin简介 74
4.4.2 安装html-webpack-plugin 74
4.4.3 使用html-webpack-plugin 75
4.4.4 html-webpack-plugin的自定义参数 76
4.5 本章小结 80
第5章 Webpack开发环境配置 81
5.1 文件监听与webpack-dev-server 81
5.1.1 文件监听模式 81
5.1.2 webpack-dev-server的安装与启动 84
5.1.3 webpack-dev-server的常用参数 86
5.2 模块热替换 88
5.3 Webpack中的source map 93
5.3.1 source map简介 93
5.3.2 source map的配置项devtool 96
5.3.3 开发环境与生产环境source map配置 99
5.4 Asset Modules 100
5.4.1 Asset Modules简介 100
5.4.2 自定义文件名称 103
5.4.3 资源类型为asset/inline 106
5.4.4 资源类型为asset 107
5.5 本章小结 109
第6章 Webpack生产环境配置 110
6.1 环境变量 111
6.1.1 Node.js环境里的环境变量 111
6.1.2 Webpack打包模块里的环境变量 114
6.2 样式处理 115
6.2.1 样式文件的提取 116
6.2.2 Sass处理 119
6.2.3 PostCSS 121
6.3 合并配置webpack-merge 123
6.4 性能提示 129
6.5 本章小结 132
第7章 Webpack性能优化 133
7.1 打包体积分析工具webpack-bundle-analyzer 134
7.1.1 安装 134
7.1.2 使用 134
7.2 打包速度分析工具speed-measure-webpack-plugin 137
7.2.1 安装与配置 137
7.2.2 预处理器与插件的时间分析 139
7.3 资源压缩 141
7.3.1 压缩JS文件 141
7.3.2 压缩CSS文件 143
7.4 缩小查找范围 147
7.4.1 配置预处理器的exclude与include 147
7.4.2 module.noParse 148
7.4.3 resolve.modules 148
7.4.4 resolve.extensions 149
7.5 代码分割optimization.splitChunks 150
7.5.1 代码分割 150
7.5.2 splitChunks 152
7.5.3 splitChunks示例讲解 156
7.6 摇树优化Tree Shaking 161
7.6.1 使用Tree Shaking的原因 161
7.6.2 使用Tree Shaking 162
7.6.3 生产环境的优化配置 164
7.6.4 Webpack 5中对Tree Shaking的改进 165
7.7 使用缓存 167
7.7.1 Webpack中的缓存 167
7.7.2 文件系统缓存的使用 168
7.8 本章小结 169
第8章 Webpack原理与拓展 170
8.1 Webpack构建原理 170
8.1.1 Webpack打包文件分析 171
8.1.2 tapable 178
8.1.3 Webpack打包流程与源码初探 181
8.2 Webpack预处理器开发 185
8.2.1 基础预处理器开发 186
8.2.2 链式预处理器开发 188
8.2.3 自定义预处理器传参 190
8.3 Webpack插件开发 191
8.3.1 Webpack插件开发概述 191
8.3.2 Webpack插件开发实例 192
8.3.3 自定义插件传参 195
8.4 本章小结 197
第9章 Babel入门 198
9.1 Babel简介 198
9.2 Babel快速入门 199
9.2.1 Babel的安装、配置与转码 199
9.2.2 Babel转码说明 201
9.3 引入polyfill 202
9.4 本章小结 205
第10章 深入Babel 207
10.1 Babel版本 207
10.2 Babel配置文件 208
10.2.1 配置文件 208
10.2.2 插件与预设 210
10.2.3 插件与预设的短名称 212
10.2.4 Babel插件和预设的参数 213
10.3 预设与插件的选择 213
10.3.1 预设的选择 214
10.3.2 插件的选择 215
10.4 babel-polyfill 216
10.5 @babel/preset-env 224
10.5.1 @babel/preset-env简介 224
10.5.2 @babel/preset-env等价设置 225
10.5.3 @babel/preset-env与browserslist 226
10.5.4 @babel/preset-env的参数 228
10.6 @babel/plugin-transform-runtime 235
10.6.1 @babel/runtime与辅助函数 235
10.6.2 @babel/plugin-transform-runtime与辅助函数的自动引入 239
10.6.3 @babel/plugin-transform-runtime与API转换 241
10.6.4 @babel/plugin-transform-runtime配置项 245
10.7 本章小结 248
第11章 Babel工具 249
11.1 @babel/core 249
11.2 @babel/cli 252
11.2.1 @babel/cli的安装与转码 252
11.2.2 @babel/cli的常用命令 253
11.3 @babel/node 253
11.4 本章小结 255
第12章 Babel原理与Babel插件开发 256
12.1 Babel原理 256
12.1.1 Babel转码过程 256
12.1.2 Babel转码分析 257
12.2 Babel插件开发 259
12.2.1 编写简单的Babel插件 259
12.2.2 Babel插件编写指南 261
12.2.3 手写let转var插件 264
12.2.4 Babel插件传参 265
12.3 本章小结 266
附录A Module Federation与微前端 267
附录B Babel 8前瞻 271
|
| 內容試閱：
|
前言
Webpack和Babel是前端工程领域核心的两大工具。我回想起，自己初从事前端开发工作的时候，面对着技术社区杂乱的Webpack和Babel资料，在很长一段时间内都感到迷惑与不解。
做前端开发工作的年，我被Babel的那堆babel-preset-es2015、babel-preset- es2016、babel-preset-stage-0、babel-preset-stage-1、@babel/preset-env和@babel/plugin- transform-runtime配置项搞得晕头转向，经常问自己到底该用哪些配置项，到底该怎么配置。
我处于这种混乱的状态整整一年之后，才渐渐对Babel有所认知，但是这种认知也很不全面。我从Babel 6到Babel 7学到的大量知识都是错误的和即将被淘汰的。这些零散的、错误的知识碎片增加了初学者的学习难度。
对于Webpack，我差不多也曾处于一样的状态。在2016年年底，我次接触到Webpack，当时公司项目用的构建工具还不是Webpack，而技术社区内已经渐渐开始流行使用Webpack构建前端工程了。当时没有完整的Webpack资料，官方文档也不容易理解。于是我找了一些文章，尝试学习，不过没有学明白。这是因为Webpack是基于Node.js的，而我当时不会Node.js，于是我又开始学习Node.js。
几年时间过去了，我对Webpack越来越熟悉。这中间走了很多弯路，例如，为了掌握Webpack的常规配置而深入学习Node.js，其实只需要会用几个Node.js的模块函数就可以了，等等。
我觉得前端工程领域需要一本对新人友好的Webpack与Babel图书，于是我将自己的技术博客文章整理成了本书。我在本书中对博客文章中的Webpack部分进行版本升级，本书使用的是Webpack 5版本，针对Babel部分还增加了原理和插件开发的内容。本书是一本全方位地给初学者讲解Webpack和Babel的图书，希望可以帮助读者成为更优秀的JavaScript开发者。
本书主要由Webpack和Babel两大部分构成，Webpack部分是第1章到第8章，Babel部分是第9章到第12章。这两部分内容相对独立，读者可以选择自己感兴趣的部分阅读。
本书中主要使用的Webpack版本是v5.21.2，但对v5.0.0之后的版本都适用；主要使用的Babel版本是v7.13.10，但对v7.0.0之后的版本都适用，而且还对Babel版本的变化给出了详细的说明。建议读者安装与书中版本一致的工具软件，这样可以减少npm包版本带来的差异。
本书使用的某些npm包在未来可能因依赖升级而发生错误，这时可以通过将x.y.z版本号中的y升级到版本来尝试修正该错误。另外，因为Webpack生成hash值的算法比较特殊，所以读者在自己电脑上执行代码时生成的带hash值的文件名可能与书中不一样。读者在查看某些运行结果时，需要手动更改打包编译后的文件名。
在阅读本书时，如果遇到有问题或错误的地方，可以在本书的GitHub代码仓库上通过Issue反馈给我。
感谢关注我技术博客的读者们，你们的支持和赞誉给了我写作本书的动力。
感谢张东东和孟津，你们在我还是一个新人时就给予了我很多帮助，一直激励着我深入前端开发的学习。
后，感谢付睿编辑，你在我写作本书的过程中给予了我不少帮助，没有你的耐心指导就没有本书的出版。
姜瑞涛
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
