Webpack实战:入门、进阶与调优(第2版)电子书

版权页

作者简介

推荐语

前言

第1章 Webpack简介

1.1 何为Webpack

1.2 为什么需要Webpack

1.2.1 何为模块

1.2.2 JavaScript中的模块

1.2.3 模块打包工具

1.2.4 为什么选择Webpack

1.3 安装

1.4 打包第一个应用

1.4.1 Hello World

1.4.2 使用npm scripts

1.4.3 使用默认目录配置

1.4.4 使用配置文件

1.4.5 webpack-dev-server

1.5 本章小结

第2章 模块打包

2.1 CommonJS

2.1.1 模块

2.1.2 导出

2.1.3 导入

2.2 ES6 Module

2.2.1 模块

2.2.2 导出

2.2.3 导入

2.2.4 复合写法

2.3 CommonJS与ES6 Module的区别

2.3.1 动态与静态

2.3.2 值复制与动态映射

2.3.3 循环依赖

2.4 加载其他类型的模块

2.4.1 非模块化文件

2.4.2 AMD

2.4.3 UMD

2.4.4 加载npm模块

2.5 模块打包原理

2.6 本章小结

第3章 资源的输入和输出

3.1 资源处理流程

3.2 配置资源入口

3.2.1 context

3.2.2 entry

3.2.3 实例

3.3 配置资源出口

3.3.1 filename

3.3.2 path

3.3.3 publicPath

3.3.4 实例

3.4 本章小结

第4章 预处理器

4.1 一切皆模块

4.2 loader概述

4.3 loader的配置

4.3.1 loader的引入

4.3.2 链式loader

4.3.3 loader options

4.3.4 更多配置

4.4 常用loader介绍

4.4.1 babel-loader

4.4.2 ts-loader

4.4.3 html-loader

4.4.4 handlebars-loader

4.4.5 file-loader

4.4.6 url-loader

4.5 自定义loader

4.6 本章小结

第5章 样式处理

5.1 分离样式文件

5.1.1 extract-text-webpack-plugin

5.1.2 多样式文件的处理

5.1.3 mini-css-extract-plugin

5.2 样式预处理

5.2.1 Sass与SCSS

5.2.2 Less

5.3 PostCSS

5.3.1 PostCSS与Webpack

5.3.2 自动前缀

5.3.3 stylelint

5.3.4 CSSNext

5.4 CSS Modules

5.5 本章小结

第6章 代码分片

6.1 通过入口划分代码

6.2 CommonsChunkPlugin

6.2.1 提取vendor

6.2.2 设置提取范围

6.2.3 设置提取规则

6.2.4 hash与长效缓存

6.2.5 CommonsChunkPlugin的不足

6.3 optimization.SplitChunks

6.3.1 从命令式到声明式

6.3.2 默认的异步提取

6.3.3 配置

6.4 资源异步加载

6.4.1 import()

6.4.2 异步chunk的配置

6.5 本章小结

第7章 生产环境配置

7.1 环境配置的封装

7.2 开启production模式

7.3 环境变量

7.4 source-map

7.4.1 source-map原理

7.4.2 source-map配置

7.4.3 source-map安全

7.5 资源压缩

7.5.1 压缩JavaScript

7.5.2 压缩CSS

7.6 缓存

7.6.1 资源hash

7.6.2 输出动态HTML

7.6.3 使chunk id更稳定

7.7 bundle体积监控和分析

7.8 本章小结

第8章 打包优化

8.1 HappyPack

8.1.1 工作原理

8.1.2 单个loader的优化

8.1.3 多个loader的优化

8.2 缩小打包作用域

8.2.1 exclude和include

8.2.2 noParse

8.2.3 IgnorePlugin

8.2.4 缓存

8.3 动态链接库与DllPlugin

8.3.1 vendor配置

8.3.2 vendor打包

8.3.3 链接到业务代码

8.3.4 潜在问题

8.4 去除死代码

8.4.1 ES6 Module

8.4.2 使用Webpack进行依赖关系构建

8.4.3 使用压缩工具去除死代码

8.5 本章小结

第9章 开发环境调优

9.1 Webpack开发效率插件

9.1.1 webpack-dashboard

9.1.2 webpack-merge

9.1.3 speed-measure-webpack-plugin

9.1.4 size-plugin

9.2 模块热替换

9.2.1 开启HMR

9.2.2 HMR原理

9.2.3 HMR API示例

9.3 本章小结

第10章 Webpack打包机制

10.1 总览

10.2 准备工作

10.3 缓存加载

10.4 模块打包

10.4.1 Compiler

10.4.2 Compilation

10.4.3 Resolver

10.4.4 Module Factory

10.4.5 Parser

10.4.6 模板渲染

10.5 深入Webpack插件

10.5.1 Tapable

10.5.2 插件的协同模式

10.6 本章小结

第11章 实战案例

11.1 React应用

11.1.1 基础配置

11.1.2 JavaScript处理

11.1.3 TypeScript处理

11.1.4 样式处理

11.1.5 静态资源

11.1.6 多页应用公共代码优化

11.1.7 长效缓存

11.2 Vue应用

11.2.1 手动搭建Vue项目

11.2.2 通过@vue/cli搭建项目

11.3 本章小结

第12章 更多JavaScript打包工具

12.1 Rollup

12.1.1 配置

12.1.2 Rollup去除死代码

12.1.3 可选的输出格式

12.1.4 使用Rollup构建JavaScript库

12.2 Parcel

12.2.1 打包速度

12.2.2 零配置

12.3 esbuild

12.3.1 打包速度

12.3.2 缺陷

12.4 Vite

12.4.1 取长补短

12.4.2 打包流程优化

12.5 打包工具的发展趋势

12.5.1 性能与通用性

12.5.2 配置极小化与工程标准化

12.5.3 WebAssembly

12.6 本章小结