Webpack + Babel: Introduction and Detailed Examples

Name: Webpack + Babel: Introduction and Detailed Examples
ISBN: 9787121424724

姜瑞涛Publishing House of Electronics Industry · ChinaJul 2022

Rating 3.3

Word count: 83K words
Chapters: 79
ISBN: 9787121424724

Summary

This book teaches Webpack and Babel from scratch for frontend developers with no prior experience. As frontend engineering has evolved, Webpack and Babel have become two core tools of frontend development. Webpack is currently the mainstream build tool for frontend development, and Babel is the general solution for transpiling ES6 code. The book consists of two parts: Part One covers Webpack, and Part Two covers Babel.

The Webpack part explains Webpack installation, resource entry and output, preprocessor and plugin configuration, development and production environment configuration, performance optimization, and build principles. The Babel part explains Babel fundamentals, Babel configuration files, choosing presets and plugins, how to use babel-polyfill, and how to use the two core configuration items @babel/preset-env and @babel/plugin-transform-runtime. This part also explains how Babel works and how to develop Babel plugins. Finally, the appendix introduces Module Federation and micro-frontends, along with a look ahead to Babel 8.

Editor's review

This book systematically explains Webpack and Babel, the two core tools of frontend engineering, for beginners. The structure is clear: build first, then transpile, matching the toolchain order encountered in real development. The Webpack part starts with installation, entry and output, and preprocessor and plugin configuration, then extends to development and production environment configuration, performance optimization, and build principles, helping readers build a complete path from getting it working to understanding the principles. The Babel part covers fundamentals, configuration files, choosing presets and plugins, babel-polyfill, and the two core configuration items @babel/preset-env and @babel/plugin-transform-runtime, and further explains how Babel works and how to develop plugins, which is very helpful for understanding ES6 code transpilation. The appendix covers Module Federation, micro-frontends, and a look ahead to Babel 8, appropriately broadening the engineering perspective. Overall, the book features detailed examples and is suited to learning by doing, especially for readers new to frontend engineering who need to connect configuration items with real projects. It is best read alongside hands-on work building sample projects, adjusting configurations while reading.

Who it's for

A good fit for

Absolute beginners to frontend who need to systematically learn engineering tools
Frontend beginners who can build pages but cannot configure build tools
Self-taught readers who need to understand how Webpack and Babel configuration works
Frontend bootcamp students who want to fill gaps in their frontend toolchain knowledge

Not a good fit for

Senior frontend engineers with years of engineering experience seeking architecture-level advancement
Readers who only want to quickly look up configuration snippets and do not want to read systematically
Readers not involved in frontend development who only want to learn about network security

Reading tips

First read through the Webpack part and build sample projects by hand, verifying entry, output, and plugin configuration item by item.
When studying the Babel part, follow along with configuration files in practice, focusing on the logic of choosing presets and plugins.
Slow down when reading the chapters on build principles and plugin development, and debug repeatedly with the sample code.
The appendix content on micro-frontends and Babel 8 can be read as further exploration; there is no need to dig into it from the start.

About the publisher

Publishing House of Electronics Industry China · Founded in 1982

The Publishing House of Electronics Industry is a comprehensive publisher distinguished by its focus on electronic information and related fields. Judging from the more than 3,000 titles in its catalogue, its publishing covers programming and design, artificial intelligence, computer science, finance and economics, photography, and social sciences, attending both to cutting-edge technology and to general readers. Representative titles include Factor Investing: Methods and Practice, x86 Assembly Language: From Real Mode to Protected Mode, The RISC-V Reader, Artificial Intelligence: Speech Recognition, Understanding and Practice, Phased Array Radar Technology, Radar Target Characteristics, and 100 Go Mistakes and How to Avoid Them, most of which centre on technical methods and engineering practice. Its authors include Shi Chuan, Li Zhong, Wang Xiaobo, David Patterson, Andrew Waterman, and Yu Zihao, among others from China and abroad. Owing to limited public information, no further publishing features are elaborated here.

版权信息
作者简介
内容简介
前言
读者服务
第1章 Webpack入门
1.1 Webpack简介
1.2 安装Webpack 5
1.3 Webpack快速入门
1.4 Webpack预处理器
1.5 本章小结
第2章 Webpack资源入口与出口
2.1 模块化
2.2 Webpack资源入口
2.3 Webpack资源出口
2.4 hash、fullhash、chunkhash和contenthash的区别
2.5 本章小结
第3章 Webpack预处理器
3.1 预处理器的配置与使用
3.2 Babel预处理器babel-loader
3.3 文件资源预处理器file-loader
3.4 增强版文件资源预处理器url-loader
3.5 本章小结
第4章 Webpack插件
4.1 揑件简介
4.2 清除文件揑件clean-webpack-plugin
4.3 复制文件揑件copy-webpack-plugin
4.4 HTML模板揑件html-webpack-plugin
4.5 本章小结
第5章 Webpack开发环境配置
5.1 文件监听与webpack-dev-server
5.2 模块热替换
5.3 Webpack中的source map
5.4 Asset Modules
5.5 本章小结
第6章 Webpack生产环境配置
6.1 环境变量
6.2 样式处理
6.3 合并配置webpack-merge
6.4 性能提示
6.5 本章小结
第7章 Webpack性能优化
7.1 打包体积分析工具webpack-bundle-analyzer
7.2 打包速度分析工具speed-measure-webpack-plugin
7.3 资源压缩
7.4 缩小查找范围
7.5 代码分割optimization.splitChunks
7.6 摇树优化Tree Shaking
7.7 使用缓存
7.8 本章小结
第8章 Webpack原理与拓展
8.1 Webpack构建原理
8.2 Webpack预处理器开发
8.3 Webpack揑件开发
8.4 本章小结
第9章 Babel入门
9.1 Babel简介
9.2 Babel快速入门
9.3 引入polyfill
9.4 本章小结
第10章深入Babel
10.1 Babel版本
10.2 Babel配置文件
10.3 预设与揑件的选择
10.4 babel-polyfill
10.5 @babel/preset-env
10.6 @babel/plugin-transform-runtime
10.7 本章小结
第11章 Babel工具
11.1 @babel/core
11.2 @babel/cli
11.3 @babel/node
11.4 本章小结
第12章 Babel原理与Babel插件开发
12.1 Babel原理
12.2 Babel揑件开发
12.3 本章小结
附录A Module Federation与微前端
附录B Babel 8前瞻

FAQ

Will this book be too difficult for a complete beginner?

The book is aimed at frontend developers with no prior experience, and it starts from installation and basic configuration, progressing step by step. However, readers should ideally have a foundation in HTML, CSS, and JavaScript; otherwise, understanding modularization and ES6 syntax will be difficult. It is recommended to first master basic syntax, then practice with the book's examples.

How much of the book covers Webpack versus Babel?

The book consists of two parts. Part One covers Webpack, including installation, entry and output, preprocessors and plugins, development and production environment configuration, performance optimization, and build principles. Part Two covers Babel, including fundamentals, configuration files, choosing presets and plugins, using polyfill, core configuration items, and plugin development. The two parts are relatively independent and can be read as needed.

Do I need to learn the micro-frontend content in the appendix first?

The appendix introduces Module Federation, micro-frontends, and a look ahead to Babel 8; this is extension material. It is recommended to read it after mastering the main Webpack content, as it will then be easier to understand where module federation fits in engineering. It does not need to be an entry point.

This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.

About the author

姜瑞涛 Author

Jiang Ruitao is an author of Chinese programming books. Public information about him is limited: the library records show only one work, Webpack+Babel: A Beginner's Guide with Examples, generally classified under programming and design. The book focuses on Webpack, a widely used build tool in front-end engineering, and Babel, a JavaScript compiler, and is aimed at readers who want a systematic understanding of how these tools are used and configured. It is a technical tutorial that combines introductory explanations with practical examples. The choice of topic suggests that the author attends to the hands-on side of modern front-end development and prefers to organize content around tool basics and worked examples, helping readers grasp build and transpilation workflows. Because little personal background is available, his style and influence are best seen in this book's practical value for learners of front-end tooling, and it can serve as a reference for those beginning with the relevant technologies.