Webpack+Babel入门与实例详解

附录B Babel 8前瞻

附录A Module Federation与微前端

12.3 本章小结

12.2.4 Babel揑件传参

12.2.3 手写let转var揑件

12.2.2 Babel揑件编写指南

12.2.1 编写简单的Babel揑件

12.2 Babel揑件开发

12.1.2 Babel转码分析

12.1.1 Babel转码过程

12.1 Babel原理

第12章 Babel原理与Babel插件开发

11.4 本章小结

11.3 @babel/node

11.2.2 @babel/cli的常用命令

11.2.1 @babel/cli的安装与转码

11.2 @babel/cli

11.1 @babel/core

第11章 Babel工具

10.7 本章小结

10.6.4 @babel/plugin-transform-runtime配置项

10.6.3 @babel/plugin-transform-runtime与API转换

10.6.2 @babel/plugin-transform-runtime与辅助函数的自动引入

10.6.1 @babel/runtime与辅助函数

10.6 @babel/plugin-transform-runtime

10.5.4 @babel/preset-env的参数

10.5.3 @babel/preset-env与browserslist

10.5.2 @babel/preset-env等价设置

10.5.1 @babel/preset-env简介

10.5 @babel/preset-env

10.4 babel-polyfill

10.3.2 揑件的选择

10.3.1 预设的选择

10.3 预设与揑件的选择

10.2.4 Babel揑件和预设的参数

10.2.3 揑件与预设的短名称

10.2.2 揑件与预设

10.2.1 配置文件

10.2 Babel配置文件

10.1 Babel版本

第10章 深入Babel

9.4 本章小结

9.3 引入polyfill

9.2.2 Babel转码说明

9.2.1 Babel的安装、配置与转码

9.2 Babel快速入门

9.1 Babel简介

第9章 Babel入门

8.4 本章小结

8.3.3 自定义揑件传参

8.3.2 Webpack揑件开发实例

8.3.1 Webpack揑件开发概述

8.3 Webpack揑件开发

8.2.3 自定义预处理器传参

8.2.2 链式预处理器开发

8.2.1 基础预处理器开发

8.2 Webpack预处理器开发

8.1.3 Webpack打包流程与源码刜探

8.1.2 tapable

8.1.1 Webpack打包文件分析

8.1 Webpack构建原理

第8章 Webpack原理与拓展

7.8 本章小结

7.7.2 文件系统缓存的使用

7.7.1 Webpack中的缓存

7.7 使用缓存

7.6.4 Webpack 5中对Tree Shaking的改进

7.6.3 生产环境的优化配置

7.6.2 使用Tree Shaking

7.6.1 使用Tree Shaking的原因

7.6 摇树优化Tree Shaking

7.5.3 splitChunks示例讲解

7.5.2 splitChunks

7.5.1 代码分割

7.5 代码分割optimization.splitChunks

7.4.4 resolve.extensions

7.4.3 resolve.modules

7.4.2 module.noParse

7.4.1 配置预处理器的exclude与include

7.4 缩小查找范围

7.3.2 压缩CSS文件

7.3.1 压缩JS文件

7.3 资源压缩

7.2.2 预处理器与揑件的时间分析

7.2.1 安装与配置

7.2 打包速度分析工具speed-measure-webpack-plugin

7.1.2 使用

7.1.1 安装

7.1 打包体积分析工具webpack-bundle-analyzer

第7章 Webpack性能优化

6.5 本章小结

6.4 性能提示

6.3 合并配置webpack-merge

6.2.3 PostCSS

6.2.2 Sass处理

6.2.1 样式文件的提取

6.2 样式处理

6.1.2 Webpack打包模块里的环境变量

6.1.1 Node.js环境里的环境变量

6.1 环境变量

第6章 Webpack生产环境配置

5.5 本章小结

5.4.4 资源类型为asset

5.4.3 资源类型为asset/inline

5.4.2 自定义文件名称

5.4.1 Asset Modules简介

5.4 Asset Modules

5.3.3 开发环境与生产环境source map配置

5.3.2 source map的配置项devtool

5.3.1 source map简介

5.3 Webpack中的source map

5.2 模块热替换

5.1.3 webpack-dev-server的常用参数

5.1.2 webpack-dev-server的安装与启动

5.1.1 文件监听模式

5.1 文件监听与webpack-dev-server

第5章 Webpack开发环境配置

4.5 本章小结

4.4.4 html-webpack-plugin的自定义参数

4.4.3 使用html-webpack-plugin

4.4.2 安装html-webpack-plugin

4.4.1 html-webpack-plugin简介

4.4 HTML模板揑件html-webpack-plugin

4.3.3 使用copy-webpack-plugin

4.3.2 安装copy-webpack-plugin

4.3.1 copy-webpack-plugin简介

4.3 复制文件揑件copy-webpack-plugin

4.2.3 使用clean-webpack-plugin

4.2.2 安装clean-webpack-plugin

4.2.1 clean-webpack-plugin简介

4.2 清除文件揑件clean-webpack-plugin

4.1 揑件简介

第4章 Webpack插件

3.5 本章小结

3.4.3 file-loader与url-loader处理后的资源路径

3.4.2 file-loader与url-loader处理后的资源名称

3.4.1 url-loader的Base64编码

3.4 增强版文件资源预处理器url-loader

3.3.3 file-loader的其他知识

3.3.2 file-loader处理CSS引入的图片

3.3.1 file-loader处理JS引入的图片

3.3 文件资源预处理器file-loader

3.2.3 使用babel-loader

3.2.2 直接使用Webpack

3.2.1 引入问题

3.2 Babel预处理器babel-loader

3.1.3 其他预处理器写法

3.1.2 exclude和include

3.1.1 预处理器的关键配置项

3.1 预处理器的配置与使用

第3章 Webpack预处理器

2.5 本章小结

2.4.3 Webpack中hash、fullhash、chunkhash和contenthash的区别

2.4.2 Webpack与hash算法

2.4.1 浏览器缓存

2.4 hash、fullhash、chunkhash和contenthash的区别

2.3.5 Webpack的output.chunkFilename

2.3.4 output.publicPath与资源访问路径

2.3.3 Webpack的output.publicPath

2.3.2 Webpack的output.path

2.3.1 Webpack的output.filename

2.3 Webpack资源出口

2.2.2 Webpack资源入口entry

2.2.1 Webpack基础目录context

2.2 Webpack资源入口

2.1.3 CommonJS

2.1.2 ES6 Module

2.1.1 JS模块化历史

2.1 模块化

第2章 Webpack资源入口与出口

1.5 本章小结

1.4.2 Webpack预处理器的使用

1.4.1 引入CSS文件

1.4 Webpack预处理器

1.3.3 Webpack的配置文件

1.3.2 Webpack打包模式mode

1.3.1 Webpack的命令行打包

1.3 Webpack快速入门

1.2.3 全局安装与本地安装Webpack的区别

1.2.2 安装Webpack

1.2.1 安装Node.js

1.2 安装Webpack 5

1.1 Webpack简介

第1章 Webpack入门

读者服务

前言

内容简介

作者简介

版权信息

封面

封面

版权信息

作者简介

内容简介

前言

读者服务

第1章 Webpack入门

1.1 Webpack简介

1.2 安装Webpack 5

1.2.1 安装Node.js

1.2.2 安装Webpack

1.2.3 全局安装与本地安装Webpack的区别

1.3 Webpack快速入门

1.3.1 Webpack的命令行打包

1.3.2 Webpack打包模式mode

1.3.3 Webpack的配置文件

1.4 Webpack预处理器

1.4.1 引入CSS文件

1.4.2 Webpack预处理器的使用

1.5 本章小结

第2章 Webpack资源入口与出口

2.1 模块化

2.1.1 JS模块化历史

2.1.2 ES6 Module

2.1.3 CommonJS

2.2 Webpack资源入口

2.2.1 Webpack基础目录context

2.2.2 Webpack资源入口entry

2.3 Webpack资源出口

2.3.1 Webpack的output.filename

2.3.2 Webpack的output.path

2.3.3 Webpack的output.publicPath

2.3.4 output.publicPath与资源访问路径

2.3.5 Webpack的output.chunkFilename

2.4 hash、fullhash、chunkhash和contenthash的区别

2.4.1 浏览器缓存

2.4.2 Webpack与hash算法

2.4.3 Webpack中hash、fullhash、chunkhash和contenthash的区别

2.5 本章小结

第3章 Webpack预处理器

3.1 预处理器的配置与使用

3.1.1 预处理器的关键配置项

3.1.2 exclude和include

3.1.3 其他预处理器写法

3.2 Babel预处理器babel-loader

3.2.1 引入问题

3.2.2 直接使用Webpack

3.2.3 使用babel-loader

3.3 文件资源预处理器file-loader

3.3.1 file-loader处理JS引入的图片

3.3.2 file-loader处理CSS引入的图片

3.3.3 file-loader的其他知识

3.4 增强版文件资源预处理器url-loader

3.4.1 url-loader的Base64编码

3.4.2 file-loader与url-loader处理后的资源名称

3.4.3 file-loader与url-loader处理后的资源路径

3.5 本章小结

第4章 Webpack插件

4.1 揑件简介

4.2 清除文件揑件clean-webpack-plugin

4.2.1 clean-webpack-plugin简介

4.2.2 安装clean-webpack-plugin

4.2.3 使用clean-webpack-plugin

4.3 复制文件揑件copy-webpack-plugin

4.3.1 copy-webpack-plugin简介

4.3.2 安装copy-webpack-plugin

4.3.3 使用copy-webpack-plugin

4.4 HTML模板揑件html-webpack-plugin

4.4.1 html-webpack-plugin简介

4.4.2 安装html-webpack-plugin

4.4.3 使用html-webpack-plugin

4.4.4 html-webpack-plugin的自定义参数

4.5 本章小结

第5章 Webpack开发环境配置

5.1 文件监听与webpack-dev-server

5.1.1 文件监听模式

5.1.2 webpack-dev-server的安装与启动

5.1.3 webpack-dev-server的常用参数

5.2 模块热替换

5.3 Webpack中的source map

5.3.1 source map简介

5.3.2 source map的配置项devtool

5.3.3 开发环境与生产环境source map配置

5.4 Asset Modules

5.4.1 Asset Modules简介

5.4.2 自定义文件名称

5.4.3 资源类型为asset/inline

5.4.4 资源类型为asset

5.5 本章小结

第6章 Webpack生产环境配置

6.1 环境变量

6.1.1 Node.js环境里的环境变量

6.1.2 Webpack打包模块里的环境变量

6.2 样式处理

6.2.1 样式文件的提取

6.2.2 Sass处理

6.2.3 PostCSS

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.2 module.noParse

7.4.3 resolve.modules

7.4.4 resolve.extensions

7.5 代码分割optimization.splitChunks

7.5.1 代码分割

7.5.2 splitChunks

7.5.3 splitChunks示例讲解

7.6 摇树优化Tree Shaking

7.6.1 使用Tree Shaking的原因

7.6.2 使用Tree Shaking

7.6.3 生产环境的优化配置

7.6.4 Webpack 5中对Tree Shaking的改进

7.7 使用缓存

7.7.1 Webpack中的缓存

7.7.2 文件系统缓存的使用

7.8 本章小结

第8章 Webpack原理与拓展

8.1 Webpack构建原理

8.1.1 Webpack打包文件分析

8.1.2 tapable

8.1.3 Webpack打包流程与源码刜探

8.2 Webpack预处理器开发

8.2.1 基础预处理器开发

8.2.2 链式预处理器开发

8.2.3 自定义预处理器传参

8.3 Webpack揑件开发

8.3.1 Webpack揑件开发概述

8.3.2 Webpack揑件开发实例

8.3.3 自定义揑件传参

8.4 本章小结

第9章 Babel入门

9.1 Babel简介

9.2 Babel快速入门

9.2.1 Babel的安装、配置与转码

9.2.2 Babel转码说明

9.3 引入polyfill

9.4 本章小结

第10章 深入Babel

10.1 Babel版本

10.2 Babel配置文件

10.2.1 配置文件

10.2.2 揑件与预设

10.2.3 揑件与预设的短名称

10.2.4 Babel揑件和预设的参数

10.3 预设与揑件的选择

10.3.1 预设的选择

10.3.2 揑件的选择

10.4 babel-polyfill

10.5 @babel/preset-env

10.5.1 @babel/preset-env简介

10.5.2 @babel/preset-env等价设置

10.5.3 @babel/preset-env与browserslist

10.5.4 @babel/preset-env的参数

10.6 @babel/plugin-transform-runtime

10.6.1 @babel/runtime与辅助函数

10.6.2 @babel/plugin-transform-runtime与辅助函数的自动引入

10.6.3 @babel/plugin-transform-runtime与API转换

10.6.4 @babel/plugin-transform-runtime配置项

10.7 本章小结

第11章 Babel工具

11.1 @babel/core

11.2 @babel/cli

11.2.1 @babel/cli的安装与转码

11.2.2 @babel/cli的常用命令

11.3 @babel/node

11.4 本章小结

第12章 Babel原理与Babel插件开发

12.1 Babel原理

12.1.1 Babel转码过程

12.1.2 Babel转码分析

12.2 Babel揑件开发

12.2.1 编写简单的Babel揑件

12.2.2 Babel揑件编写指南

12.2.3 手写let转var揑件

12.2.4 Babel揑件传参

12.3 本章小结

附录A Module Federation与微前端

附录B Babel 8前瞻