在前端工程化实践中，Webpack 的插件体系是扩展其功能的核心手段。你能列举出几个实际项目里常用的 Webpack 插件，并分别说明它们各自解决什么问题、通常在什么场景下被引入吗？
考察说明
考察对 Webpack 插件生态的熟悉程度，以及能否结合具体构建场景说明插件的实际用途。
回答思路
- 【回答框架 1】Webpack 插件是应用于构建流程特定阶段（如初始化、生成资源、输出等）的类，通过访问编译器（Compiler）和编译（Compilation）对象来扩展功能。常用插件按用途可分为：优化类（压缩、分包）、开发类（热更新、进度展示）、环境类（注入变量、清理目录）等。
- 【回答框架 2】优化类插件：HtmlWebpackPlugin 根据模板生成 HTML 并自动引入打包后的资源；MiniCssExtractPlugin 将 CSS 提取为独立文件并支持按需加载；TerserWebpackPlugin 用于压缩 JavaScript 代码；SplitChunksPlugin（内置）用于提取公共依赖和按需分包，减少重复代码。
- 【回答框架 3】开发类插件：HotModuleReplacementPlugin 启用模块热替换，实现局部更新而不刷新整页；FriendlyErrorsWebpackPlugin 格式化编译错误和警告提示；ProgressPlugin 显示编译进度。开发时通常搭配 style-loader 和 css-loader。
- 【回答框架 4】环境与构建类插件：DefinePlugin 在编译时注入全局常量（如 API 地址），区分开发和生产环境；CleanWebpackPlugin 在每次构建前清理输出目录；CopyWebpackPlugin 复制静态资源到构建目录；OptimizeCssAssetsPlugin 用于压缩生产环境的 CSS。
- 【回答框架 5】选择插件的依据是项目实际需求，例如需要多页面时用 HtmlWebpackPlugin 的多个实例，需要代码分割时配置 SplitChunks 或使用动态导入。在 Webpack 5 中部分功能已内置（如压缩通过 mode 配置），但仍需根据场景选用社区插件。避免盲目安装插件，每种插件都会增加构建时间和复杂度。
- 【关键点 1】HtmlWebpackPlugin 和 MiniCssExtractPlugin 是最常用的两类插件，分别处理 HTML 生成和 CSS 提取。
- 【关键点 2】DefinePlugin 用于注入环境变量，区分开发和正式构建。
- 【关键点 3】SplitChunksPlugin 在 Webpack 4+ 内置，用于公共代码提取和分包。
- 【关键点 4】开发环境多用 HotModuleReplacementPlugin 实现热更新，生产环境多用 TerserWebpackPlugin 压缩 JS。
- 【关键点 5】选择插件需结合实际需求和构建流程，避免过度使用导致构建性能下降。
- 【易错点 1】不能将 HtmlWebpackPlugin 与 HtmlWebpackHarddiskPlugin 混为一谈，前者生成 HTML，后者仅用于开发服务器中保留物理文件。
- 【易错点 2】使用 MiniCssExtractPlugin 时要注意顺序，需要 loader 与插件配合，且在生产环境才启用。
- 【易错点 3】DefinePlugin 注入的只是字符串替换，不是真正的运行时变量，不能误用于注入动态值。