前言
Webpack 是前端开发中常用的打包工具，很多项目都会用到。但是不同的项目在不同的环境中需要不同的打包配置，这就需要我们学习如何在多环境中使用不同的配置来优化我们的构建。
环境变量
在多环境中，我们可以通过设置环境变量来区分环境。在 Node.js 中，我们可以通过 process.env 来读取环境变量。例如，我们可以通过设置 NODE_ENV=production 来表示当前环境为生产环境。
通过配置文件方式使用不同的配置
我们可以通过配置文件方式来创建不同环境下的配置。例如，我们可以在项目的根目录下创建一个 webpack.config.js 文件，来管理我们的 webpack 配置。在这个文件中，我们可以把不同环境下的配置都写在不同的条件语句中。
以下是一个示例的 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - --- -- -
-- -----------------
-- ---- --- ------------- -
------ -
----- -------------
-- ---
--
-
-- ---- --- -------------- -
------ -
----- --------------
-- ---
--
-
--我们可以通过以下的命令来指定环境变量：
$ NODE_ENV=production webpack --config webpack.config.js
在运行这个命令时，Webpack 会根据当前环境变量的值来读取相应的配置。
使用 webpack-merge 处理不同环境下的公共部分
在实际项目中，不同环境下的配置有很多是相同的，我们可以使用 webpack-merge 插件来处理不同环境下相同的代码。
以下是一个示例的配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----- - -------------------------
----- ------------ - --------------------------------------
-------------- - --- -- -
-- -----------------
-- ---- --- ------------- -
------ ------------------- -
----- -------------
-- ---
---
-
-- ---- --- -------------- -
------ ------------------- -
----- --------------
-- ---
---
-
--在以上示例中，我们通过引入 webpack-merge 插件，在不同环境下把公共的部分拼接到各自的配置中。
使用 DefinePlugin 定义环境变量
我们还可以使用 DefinePlugin 插件来定义环境变量，从而在编译的时候直接替换变量。
以下是一个使用 DefinePlugin 插件的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - --- -- -
------ -
-------- -
--- ----------------------
-------------- -
--------- -------------------
-
--
--
-- ---
--
--在这个示例中，我们通过 webpack.DefinePlugin 来定义了一个 process.env 对象，里面有一个属性 NODE_ENV，该属性的值为当前环境变量。此时，我们可以在代码中直接使用 process.env.NODE_ENV，来获取当前环境的值。
总结
Webapck 如何在多环境中使用不同的配置，是一个前端开发人员需要掌握的知识点。通过学习本文所述内容，可以更好地理解和掌握这方面的技巧和知识点。同时，我们也需要对当前项目的需求和环境来做出精准的配置决策。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64684d05968c7c53b0882745