从零开始配置 react + typescript（三）：webpack
内容提要
本文是 React + TypeScript 系列第三篇，讲解 webpack 配置。用 TypeScript 编写配置，采用 express 加 webpack-dev-middleware 搭建 devServer 实现热更新。开发环境优化包括打包进度、友好报错、类型检查等插件；生产环境优化涵盖 CSS 拆分、代码压缩、tree-shaking、gzip 及构建分析。
延伸解读
为什么选择 TypeScript 编写 webpack 配置
文章采用 TypeScript 编写 webpack 配置，而非传统的 JavaScript。这样做的好处是借助 IDE 的类型提示和代码补全，无需频繁查阅官方文档就能知道配置对象有哪些字段，同时避免拼写错误。此外，TypeScript 的静态类型检查能在配置阶段发现潜在问题，提升开发效率和配置的可靠性。
express + 中间件搭建 devServer 的灵活性
作者没有使用 webpack-dev-server 命令行工具，而是选择 express 搭配 webpack-dev-middleware 和 webpack-hot-middleware 来搭建开发服务器。这种方式将中间件直接暴露，可以灵活配置代理、history fallback、CORS 等功能，甚至集成 mock。相比官方命令行，node API 方式更灵活，且基于 express 生态更成熟稳定。
开发环境插件的取舍与考量
文章介绍了多个开发环境优化插件，但并非全部集成。例如 case-sensitive-paths-webpack-plugin 虽然能严格检查路径大小写，但实际打包测试中发现非常耗时，且 eslint-import-plugin 已能覆盖类似检查，因此未采用。hard-source-webpack-plugin 能大幅提升二次编译速度，但初次打包耗时严重，且 webpack5 将内置该功能，故也放弃。这体现了按需选择、避免过度优化的思路。
生产环境构建的关键优化点
生产环境配置中，作者使用 mini-css-extract-plugin 将 CSS 拆分为独立文件，避免 JS bundle 过大导致首页白屏；使用 terser-webpack-plugin 压缩 JavaScript 并利用 tree-shaking 去除死代码；使用 optimize-css-assets-webpack-plugin 压缩 CSS。此外，还通过 compression-webpack-plugin 准备 gzip 版本，并用 size-plugin 跟踪 gzip 后的体积变化，帮助控制资
Q&A
为什么在 webpack 配置中使用 TypeScript 而不是 JavaScript？
使用 TypeScript 可以获得类型提示和代码补全，无需查阅官方文档就能知道 webpack 配置对象有哪些字段，并且避免敲错，提高开发效率和准确性。
如何搭建 webpack devServer 实现热更新？
采用 express + webpack-dev-middleware + webpack-hot-middleware 的方式。webpack-dev-middleware 作为静态文件服务器托管编译后的 bundle，webpack-hot-middleware 注册为 webpack 插件监听编译事件，并通过客户端补丁实现热更新。
开发环境有哪些优化措施？
包括使用 webpackbar 显示打包进度、friendly-errors-webpack-plugin 优化控制台输出、webpack-build-notifier 构建通知、case-sensitive-paths-webpack-plugin 检查路径大小写、circular-dependency-plugin 检查循环依赖、fork-ts-checker-webpack-plugin 进行 TypeScript 类型检查等。
生产环境构建时如何优化 CSS 和 JavaScript？
CSS 使用 mini-css-extract-plugin 拆分成单独文件，并用 optimize-css-assets-webpack-plugin 压缩；JavaScript 使用 terser-webpack-plugin 压缩，并利用 tree-shaking 去除死代码。
如何配置 webpack 以支持 CSS、Less、Sass 以及自动添加浏览器前缀？
通过 css-loader、style-loader、less-loader、sass-loader 处理样式文件，并配合 postcss-loader 及 autoprefixer 等插件自动添加浏览器前缀。使用 getCssLoaders 函数统一配置，并根据需要设置 importLoaders。
如何实现 React 组件的热更新？
安装 react-hot-loader，在 babel 配置中添加 react-hot-loader/babel 插件，在 webpack entry 中加入 react-hot-loader/patch，并使用 hot 高阶组件包裹根组件。对于 hooks 热更新，还需配置 alias 将 react-dom 替换为 @hot-loader/react-dom。
生产环境构建时如何进行构建分析和 gzip 压缩准备？
使用 speed-measure-webpack-plugin 统计打包时间，webpack-bundle-analyzer 分析 bundle 大小，compression-webpack-plugin 生成 gzip 压缩版本，size-plugin 跟踪 gzip 后资源大小变化。
