前言
核心依赖
在说明webpack的配置之前，先了解一下需要使用的依赖：
（1）Babel 相关
@babel/core：Babel 核心库，用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。
babel-jest：Jest 的 Babel 预处理器，使 Jest 能处理经过 Babel 转换的代码。
babel-loader：Webpack 加载器，用于在构建过程中使用 Babel 转换 JavaScript 文件。
babel-plugin-named-asset-import：Babel 插件，支持导入资源时使用命名导入而非默认导入。
babel-preset-react-app：Create React App 使用的 Babel 预设，包含了 React 项目所需的所有 Babel 插件配置。
（2）React 相关
react：React 库的核心包，提供创建 React 组件的基础 API。
react-dom：React 用于操作 DOM 的包，提供与浏览器 DOM 交互的方法。
react-refresh：实现 React 组件的热更新，无需刷新整个页面。
@pmmmwh/react-refresh-webpack-plugin：Webpack 插件，配合 react-refresh 实现热更新功能。
react-app-polyfill：提供现代 JavaScript 特性的垫片，确保应用在旧版浏览器中正常运行。
react-dev-utils：Create React App 开发工具包，包含了开发服务器、错误覆盖等实用工具。
（3）测试相关
@testing-library/dom：DOM 测试工具库，提供测试 DOM 元素的辅助函数。
@testing-library/jest-dom：为 Jest 提供自定义断言，方便测试 DOM 元素状态。
@testing-library/react：React 组件测试工具库，专注于测试组件的用户交互行为。
@testing-library/user-event：模拟真实用户交互的测试工具，如点击、输入等操作。
jest：JavaScript 测试框架，提供测试运行器、断言库等功能。
jest-resolve：Jest 的模块解析器，用于定位测试所需的模块。
jest-watch-typeahead：Jest 插件，提供交互式测试过滤功能。
（4）Webpack 相关
webpack：模块打包工具，负责将多个模块打包成一个或多个文件。
webpack-dev-server：开发服务器，支持热更新和实时刷新功能。
webpack-manifest-plugin：生成资源清单文件，记录打包后的文件名及其对应的原文件。
workbox-webpack-plugin：生成 Service Worker 文件，帮助实现离线缓存功能。
@svgr/webpack：Webpack 加载器，将 SVG 文件转换为 React 组件。
case-sensitive-paths-webpack-plugin：强制路径大小写敏感，避免在不同操作系统上出现路径问题。
css-minimizer-webpack-plugin：压缩和优化 CSS 代码的 Webpack 插件。
eslint-webpack-plugin：在 Webpack 构建过程中运行 ESLint 代码检查。
html-webpack-plugin：生成 HTML 文件并自动引入打包后的资源文件。
mini-css-extract-plugin：将 CSS 提取到单独的文件中，而不是内联在 JavaScript 中。
source-map-loader：加载源映射文件，方便调试打包后的代码。
terser-webpack-plugin：压缩和混淆 JavaScript 代码的 Webpack 插件。
（5）样式相关
css-loader：解析 CSS 文件中的 @import 和 url() 等语句。
postcss：用 JavaScript 转换 CSS 的工具，可配合各种插件实现 CSS 转换。
postcss-flexbugs-fixes：修复 Flexbox 在某些浏览器中的已知问题。
postcss-loader：Webpack 加载器，使用 PostCSS 处理 CSS 文件。
postcss-normalize：集成 normalize.css，提供跨浏览器的一致样式基础。
postcss-preset-env：PostCSS 插件，将现代 CSS 转换为大多数浏览器支持的版本。
sass-loader：将 Sass/SCSS 文件编译为 CSS 的 Webpack 加载器。
style-loader：将 CSS 注入到 DOM 中的 Webpack 加载器。
tailwindcss：实用优先的 CSS 框架，可快速构建自定义 UI。
（6）其他依赖
bfj：二进制 JSON 流处理工具，用于高效处理大型 JSON 数据，但是与标准JSON存在兼容性问题。
browserslist：指定项目支持的浏览器范围，各种转换工具会据此进行适配。
camelcase：将字符串转换为驼峰命名法的工具。
dotenv：加载环境变量的工具，从 .env 文件中读取环境变量。
dotenv-expand：扩展 dotenv 加载的环境变量，支持变量引用，类似于模板语法/${DB_HOST}等。
eslint：JavaScript 代码检查工具，确保代码风格和质量。
eslint-config-react-app：Create React App 使用的 ESLint 配置。
file-loader：处理文件资源的 Webpack 加载器，返回文件的公共 URL，默认会根据文件内容生成哈希值作为文件名（如 image.[hash].[ext]），避免缓存问题和命名冲突，这个好像之前面试的时候被问到过，在性能优化上推荐使用url-loader将小文件转化成base64，然后使用webpack5内置资源模块asset/resource代理file-loader，从而减少loader依赖。
fs-extra：扩展 Node.js 的 fs 模块，提供更多便捷的文件操作方法。
identity-obj-proxy：用于测试的代理对象，可模拟 CSS 模块。
prompts：创建交互式命令行界面的工具，用于项目初始化的时候询问，也就对应需要选择y/n的提问。
resolve：Node.js 模块解析算法的实现，用于定位模块文件。
resolve-url-loader：处理 CSS 中相对路径的 Webpack 加载器，与 file-loader 等合作处理这些修正后的路径，确保资源路径正确。
semver：语义化版本号处理工具，用于版本号的比较和验证，协助开发者和用户管理依赖、理解兼容性，并做出升级决策。
web-vitals：测量网站性能指标的库，提供核心 Web Vitals 指标的测量方法。
这些依赖共同构成了一个完整的 React 开发环境，涵盖了代码转换、打包、测试、样式处理、性能优化等多个方面。
