[webpack] webpack 是如何给 web 应用注入环境变量的， 原理是啥

工程化百度

Webpack 可以通过 DefinePlugin 插件给 web 应用注入环境变量。该插件会在编译过程中替换掉代码中指定的变量，以实现在运行时替换成环境变量的值。

在 webpack 的配置文件中，需要先引入该插件，然后将需要注入的环境变量通过该插件进行配置。例如：

const webpack = require('webpack');

module.exports = {
  // 其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      },
      API_URL: JSON.stringify('http://api.example.com')
    })
  ]
};

上述配置中，定义了两个需要注入的变量，分别是 process.env.NODE_ENV 和 API_URL。其中，process.env.NODE_ENV 是一个常用的环境变量，用来标识当前是开发环境还是生产环境；API_URL 是一个自定义的环境变量，用来存储 API 的地址。

在代码中使用这些环境变量时，只需要直接引用即可：

if (process.env.NODE_ENV === 'production') {
  console.log('当前为生产环境');
}

fetch(API_URL + '/users')
  .then(response => response.json())
  .then(data => console.log(data));

Webpack 在编译时会将这些变量替换成对应的值，例如：

if ('production' === 'production') {
  console.log('当前为生产环境');
}

fetch('http://api.example.com' + '/users')
  .then(response => response.json())
  .then(data => console.log(data));

通过这种方式，我们就可以在代码中方便地使用环境变量，同时保证了在不同环境下都能正确地使用相应的变量值。