Webpack是一个现代化的javascript应用程序的包管理器和构建工具。它可以帮助前端开发人员将不同类型的文件，如脚本、样式、图片等，打包为一个独立的文件。而webpack-environment-config-plugin是一个Webpack插件，可以根据环境变量来加载不同的配置文件，从而实现自动化的配置文件管理。
安装
使用npm或yarn安装webpack-environment-config-plugin。
npm install webpack-environment-config-plugin 或 yarn add webpack-environment-config-plugin
配置
创建配置文件
首先，创建一个名为config的文件夹，然后在该文件夹下创建config.js和config.prod.js两个文件。其中，config.js中包含基础的配置信息，config.prod.js中包含生产环境的特定配置信息。
config ├── config.js └── config.prod.js
编写配置文件
下面是一个简单的config.js文件的示例，用于设置开发环境的配置信息。
module.exports = {
port: 3000,
apiURL: 'http://localhost:8000',
logging: true,
};下面是一个简单的config.prod.js文件的示例，用于设置生产环境的配置信息。
module.exports = {
port: 80,
apiURL: 'https://myapi.com',
logging: false,
};配置webpack环境变量
在webpack的配置文件中，可以通过process.env.NODE_ENV获取当前的环境变量。例如，如果我们在开发环境中运行webpack，则process.env.NODE_ENV的值是development。而如果在生产环境中运行webpack，则process.env.NODE_ENV的值是production。我们需要通过这个环境变量来指示webpack-environment-config-plugin加载哪个配置文件。
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------------- - ---------------------------------------------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
--- -------------------------
----- -------------------------------------------
---
-- ---
--
-- ---
-在上面的代码中，我们通过EnvironmentConfigPlugin指定了要加载的配置文件，如果当前环境是开发环境，则加载config/config.js文件，如果是生产环境，则加载config/config.prod.js文件。
将配置信息注入到应用中
最后，在应用程序中，我们可以通过以下方式来获取配置信息：
const config = require('./config/config');
console.log(config.apiURL); // http://localhost:8000
如果应用程序是在生产环境中运行，则可以将config.prod.js中的配置信息注入到应用程序中，如下所示：
const config = require('./config/config');
console.log(config.apiURL); // https://myapi.com
结论
通过使用webpack-environment-config-plugin，我们可以轻松地管理项目的不同环境，从而使我们的开发工作更加高效和自动化。同时，它还可以简化代码的重构和重复性操作，提高我们的开发效率。在实际应用中，我们可以根据实际需求来针对不同的环境配置不同的文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0d81e8991b448d8b3f