Webpack 是一个流行的前端构建工具，它可以自动化处理 JavaScript、CSS、图片等资源，并将它们打包成生产环境可用的文件。但是，不是所有项目都需要使用 Webpack。在某些情况下，你可能会发现只在特定的环境下（如开发或测试）使用 Webpack 更加合适。本文将介绍如何根据条件来配置 Webpack，并提供详细的学习和指导意义。
环境变量
在讨论如何根据条件配置 Webpack 之前，我们需要了解一些关于环境变量的知识。环境变量是操作系统级别的变量，它们保存有关当前运行环境的信息。例如，在 Node.js 中，可以通过 process.env.NODE_ENV 访问环境变量 NODE_ENV，这是一个常见的用于指定当前环境的变量。在 React 应用程序中，默认情况下，NODE_ENV 将根据 package.json 文件中的 scripts 字段自动设置为 "development" 或 "production"。
根据环境使用 Webpack
当你确定需要使用 Webpack 时，下一步就是确定在哪些环境下使用它。通常，你会希望在开发和测试环境下使用 Webpack，而在生产环境下不使用。为了实现这一点，可以使用 Node.js 的 process.env.NODE_ENV 变量来判断当前环境。
开发环境
在开发环境下，你通常需要启用 Webpack 的热重载功能，并在保存文件时重新构建应用程序。此外，你还需要为 Webpack 配置 source map，以便在出现错误时更容易调试代码。以下是一个基本的 Webpack 配置文件示例，用于开发环境：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - -------------------------- - - -------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- --------------------
---------- -
------------ ---------
---- -----
--
-------- -
--- -------------------
--------- -------------------
---
--- -----------------------------
--
--在上面的配置文件中，我们将模式设置为开发模式，为输出的 bundle 文件提供了一个路径和名称，启用了 source map，以及配置了一个简单的 devServer。devServer 选项包括 contentBase、hot 和 port，这些选项都有助于启用热重载功能。最后，在 plugins 中添加了 HtmlWebpackPlugin 和 HotModuleReplacementPlugin，前者用于自动生成 HTML 文件，后者用于启用热重载插件。
生产环境
在生产环境中，你通常需要对代码进行优化，以提高性能并减少文件大小。为此，你可以使用 Webpack 的一些插件和选项来处理代码。以下是一个基本的 Webpack 配置文件示例，用于生产环境：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- --------------------------
--
------------- -
--------- -----
-- ---
--
-------- -
--- -------------------
--------- -------------------
------- -
------------------- -----
--------------- -----
-------------------------- -----
--------------------------- -----
------------------------------ -----
---------------- -----
--
---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------