Webpack-env-loader 是一个 npm 包，可以帮助前端开发者在使用 Webpack 构建时加载不同的环境配置文件。在前端开发中，我们通常会有多个环境，例如本地开发、测试环境和生产环境。不同的环境需要不同的配置文件。使用 webpack-env-loader 可以让开发者在打包时，根据当前环境去加载不同的配置文件一共提高开发效率。
安装
安装 webpack-env-loader 最简单的方法是通过 npm，执行下面的命令即可：
npm install webpack-env-loader --save-dev
配置
在配置 webpack 时，通过使用 webpack-env-loader，可以让 webpack 根据当前环境来动态加载不同的配置文件。
在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
----- --- - -------------------- -- --------------
----- --------- - ---------------------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -
-
------- ---------------------
-------- -
-------- ----------
--
--
--
--
--
--
-- ---
--上面的代码将会在执行 webpack 构建时动态加载 ./env/${env}.js 文件中的配置信息，${env} 的值默认是 development，如果当前环境是其他环境，如 test 或 production，则需要将该值设置为对应的环境。
示例
下面是一个示例，假设我们有三个环境：development、test 和 production，对应的配置文件分别为：
- development.js
module.exports = {
api: 'http://localhost:3000',
debug: true,
};- test.js
module.exports = {
api: 'http://test.example.com',
debug: false,
};- production.js
module.exports = {
api: 'http://example.com',
debug: false,
};在代码中使用环境变量，在 src/index.js 和 src/app.js 中加入下面的代码。
console.log(process.env.NODE_ENV); // 如果你没有设置，将会输出'undefined' console.log(process.env.API);
在 webpack.config.js 中使用 webpack-env-loader 并指定当前环境。
-- -------------------- ---- -------
----- --- - -------------------- -- --------------
----- --------- - ---------------------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -
-
------- ---------------------
-------- -
-------- ----------
--
--
--
--
--
--
-- ---
--在 package.json 中将 NODE_ENV 变量设置为想要的环境，例如：
{
"scripts": {
"start": "NODE_ENV=development webpack serve --open",
"build": "NODE_ENV=production webpack --env production"
}
}现在，我们可以通过不同的命令启动不同的环境，例如：
npm start启动开发环境npm run build打包生产环境
在命令行中运行这些命令，然后刷新页面。如果一切正常，你应该能够在 Chrome 的开发者工具中看到输出的环境变量和 API 地址。
总结
webpack-env-loader 可以让我们在不同的环境中加载不同的配置文件，并根据环境变量加载对应的配置文件，提高开发效率。在实际的项目开发中，我们必须根据不同的环境来使用不同的配置。webpack-env-loader 可以帮助我们达成目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc92