Webpack+Babel入门与实例详解

"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插件的开发。最后，在附录中介绍了ModuleFederation与微前端，以及Babel8前瞻等内容。本书主要使用的Webpack版本是v5.21.2，但对v5.0.0之后的版本都适用；主要使用的Babel版本是v7.13.10，但对v7.0.0之后的版本都适用。

"姜瑞涛 毕业于华北电力大学，五年前端开发经验。曾在好未来、用友担任高级前端开发工程师，参与过用友NC Cloud大型企业数字化平台和学而思网校1对1管理后台的开发。擅长工程化解决前端兼容性问题，在Babel的使用上有丰富经验。"

第1章Webpack入门
1.1Webpack简介
1.2安装Webpack
1.2.1安装Node.js
1.2.2安装Webpack
1.2.3全局安装与本地安装Webpack的区别
1.3Webpack快速入门
1.3.1Webpack的命令行打包
1.3.2Webpack打包模式mode
1.3.3Webpack的配置文件
1.4Webpack预处理器
1.4.1引入CSS文件
1.4.2Webpack预处理器的使用
1.5本章小结
第2章Webpack资源入口与出口
2.1模块化
2.1.1JS模块化历史
2.1.2ES6Module
2.1.3CommonJS
2.2Webpack资源入口
2.2.1Webpack基础目录context
2.2.2Webpack资源入口entry
2.3Webpack资源出口
2.3.1Webpack的output.filename
2.3.2Webpack的output.path
2.3.3Webpack的output.publicPath
2.3.4output.publicPath与资源访问路径
2.3.5Webpack的output.chunkFilename
2.4hash、fullhash、chunkhash和contenthash的区别
2.4.1浏览器缓存
2.4.2Webpack与hash算法
2.4.3Webpack中hash、fullhash、chunkhash和contenthash的区别
2.5本章小结
第3章Webpack预处理器
3.1预处理器的配置与使用
3.1.1预处理器的关键配置项
3.1.2exclude和include
3.1.3其他预处理器写法
3.2Babel预处理器babel-loader
3.2.1引入问题
3.2.2直接使用Webpack
3.2.3使用babel-loader
3.3文件资源预处理器file-loader
3.3.1file-loader处理JS引入的图片
3.3.2file-loader处理CSS引入的图片
3.3.3file-loader的其他知识
3.4增强版文件资源预处理器url-loader
3.4.1url-loader的Base64编码
3.4.2file-loader与url-loader处理后的资源名称
3.4.3file-loader与url-loader处理后的资源路径
3.5本章小结
第4章Webpack插件
4.1插件简介
4.2清除文件插件clean-webpack-plugin
4.2.1clean-webpack-plugin简介
4.2.2安装clean-webpack-plugin
4.2.3使用clean-webpack-plugin
4.3复制文件插件copy-webpack-plugin
4.3.1copy-webpack-plugin简介
4.3.2安装copy-webpack-plugin
4.3.3使用copy-webpack-plugin
4.4HTML模板插件html-webpack-plugin
4.4.1html-webpack-plugin简介
4.4.2安装html-webpack-plugin
4.4.3使用html-webpack-plugin
4.4.4html-webpack-plugin的自定义参数
4.5本章小结
第5章Webpack开发环境配置
5.1文件监听与webpack-dev-server
5.1.1文件监听模式
5.1.2webpack-dev-server的安装与启动
5.1.3webpack-dev-server的常用参数
5.2模块热替换
5.3Webpack中的sourcemap
5.3.1sourcemap简介
5.3.2sourcemap的配置项devtool
5.3.3开发环境与生产环境sourcemap配置
5.4AssetModules
5.4.1AssetModules简介
5.4.2自定义文件名称
5.4.3资源类型为asset/inline
5.4.4资源类型为asset
5.5本章小结
第6章Webpack生产环境配置
6.1环境变量
6.1.1Node.js环境里的环境变量
6.1.2Webpack打包模块里的环境变量
6.2样式处理
6.2.1样式文件的提取
6.2.2Sass处理
6.2.3PostCSS
6.3合并配置webpack-merge
6.4性能提示
6.5本章小结
第7章Webpack性能优化
7.1打包体积分析工具webpack-bundle-analyzer
7.1.1安装
7.1.2使用
7.2打包速度分析工具speed-measure-webpack-plugin
7.2.1安装与配置
7.2.2预处理器与插件的时间分析
7.3资源压缩
7.3.1压缩JS文件
7.3.2压缩CSS文件
7.4缩小查找范围
7.4.1配置预处理器的exclude与include
7.4.2module.noParse
7.4.3resolve.modules
7.4.4resolve.extensions
7.5代码分割optimization.splitChunks
7.5.1代码分割
7.5.2splitChunks
7.5.3splitChunks示例讲解
7.6摇树优化TreeShaking
7.6.1使用TreeShaking的原因
7.6.2使用TreeShaking
7.6.3生产环境的优化配置
7.6.4Webpack5中对TreeShaking的改进
7.7使用缓存
7.7.1Webpack中的缓存
7.7.2文件系统缓存的使用
7.8本章小结
第8章Webpack原理与拓展
8.1Webpack构建原理
8.1.1Webpack打包文件分析
8.1.2tapable
8.1.3Webpack打包流程与源码初探
8.2Webpack预处理器开发
8.2.1基础预处理器开发
8.2.2链式预处理器开发
8.2.3自定义预处理器传参
8.3Webpack插件开发
……