引言
随着前端部署的要求越来越高，我们需要将同一个应用程序部署到不同的环境中，例如测试环境、预发环境、生产环境等。但是，不同的环境需要使用不同的配置文件，这可能导致我们的代码变得冗长而难以维护。在这种情况下，使用 webpack 环境变量进行多环境打包，可以帮助我们简化代码，并更好地管理不同的环境。
本文将介绍如何使用 webpack 环境变量进行多环境打包，并提供示例代码，以便读者更好地理解。
基础知识
首先，我们需要了解和使用 webpack 的两个插件：
dotenv-webpack：用于从.env文件中加载环境变量。webpack.DefinePlugin：用于在代码中注入环境变量。
.env 文件可以用来保存我们的环境变量，并且不同环境有不同的 .env 文件，这样我们可以根据不同的环境，使用不同的配置项。同时，为了防止 .env 文件泄漏，应该将它们添加到 .gitignore 文件中，不要上传到仓库。下面是一个 .env 文件的示例：
DOMAIN=foo.com
API_URL=https://${DOMAIN}/api/v1/
DEV_API_URL=https://dev.${DOMAIN}/api/v1/我们可以通过 $ 来引用环境变量。在这个示例中，API_URL 和 DEV_API_URL 分别引用了 DOMAIN 变量，以构建不同的 API URL。如果代码中使用 API_URL 变量，将根据 .env 文件的配置，仅仅是将 API_URL 替换为对应的值。
配置环境变量
下面我们需要将从 .env 文件获取的环境变量，注入到我们的代码中。我们可以使用 webpack.DefinePlugin 来完成这个工作。下面是一个示例的 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -------------------------- -- -- --------------
----- - ------------ - - ------------------- -- -- --------------------
-------------- - ----- -- -
----- ------------ - -------------- --- ----- -- ----
------ -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- --------- -- --- --------------
--- -------------- -- --- --------------------
-------------- -
--------- ----------------------------------- -- - -------- --------
---------- ------------------------------------ -- - --------- --------
--------------- ------------ - ------ - ------- -- ----------
-
--
-
-
-注意：
.env文件应位于项目的根目录下。JSON.stringify(process.env.{VARIABLE})可以将.env文件中的变量值正确转义。DefinePlugin接收一个对象，对象的属性名是要注入到代码中的变量名，属性值是变量值。在这个示例中，我们将DOMAIN和API_URL注入了到代码中。特别地，我们使用了构造函数的形式来初始化DefinePlugin中的变量，这可以帮助我们根据环境设置常量变量。
示例代码
假设我们有这样一个文件结构：
project ├── dist ├── src │ └── index.js ├── .env.development ├── .env.production └── webpack.config.js
我们希望在测试环境中使用 .env.development 文件，在生产环境中使用 .env.production 文件。下面是我们可以使用的代码：
-- -------------------- ---- -------
----- -------- - -
------------ -------------------
----------- -----------------
--
-------------- - ----- -- -
----- ------- - ----------------------- - ------------ - --------------- -- ------- ---- --
------ -
-- ---
-------- -
--- --------
----- ----------------------- -------- -- --------- ---- --
---
--- --------------
-------------- -
--------- -----------------------------------
---------- ------------------------------------
--------------- ------------ - ------ - -------
-
--
-
-
-如此，我们完成了 webpack 的配置。
结论
本文介绍了如何使用 webpack 环境变量进行多环境打包，并提供了示例代码。该方法可以让我们更好地管理不同的环境，并简化我们的代码。希望读者通过本文的介绍，可以更好地理解和使用该技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674f4776e884a3e30f2d35aa