有两种基本方法可以实现这一点。

DefinePlugin

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

注意，这将只是替换匹配的“原样”。这就是为什么字符串是这样的格式。你可以有一个更复杂的结构，比如一个物体但你懂的。

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin在内部使用DefinePlugin并通过它将环境值映射到代码。含混的语法。

别名

或者，您可以通过别名模块使用配置。从消费者的角度来看，它是这样的:

var config = require('config');

配置本身可能是这样的:

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

我们写入process。env。NODE_ENV是开发。然后它会映射到。/config/development.js。它映射到的模块可以像这样导出配置:

module.exports = {
    testing: 'something',
    ...
};

你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。

你只需要在webpack.config.js文件中声明这个插件:

var webpack = require('webpack');

module.exports = {
    /* ... */
    plugins: [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ]
};

注意，必须显式声明要使用的环境变量的名称。

你可以使用——env传递环境变量，而不需要额外的插件

Webpack -

webpack --config webpack.config.js --env.foo=bar

Webpack 5+（无）

webpack --config webpack.config.js --env foo=bar

然后，使用webpack.config.js中的变量:

module.exports = function(env) {
    if (env.foo === 'bar') {
        // do something
    }
}

进一步阅读:Webpack 2.0不支持自定义命令行参数? # 2254

就我个人而言，我更喜欢以下这些答案:

const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: prod? `"production"`: '"development"'
        }
      }
    }),
    ...
  ]
};

使用它不会有奇怪的env变量或跨平台问题(使用env变量)。你所要做的就是分别为开发或生产运行普通的webpack或webpack -p。

参考:Github问题

dotenv-webpack

一个安全的webpack插件，支持dotenv和其他环境变量，只公开您选择和使用的内容。

通过一些基于默认选项的配置解决方案来实现这一点，一旦包有.env.defaults文件作为env变量的初始值，您就可以在开发中使用它，并让.env用于生产。

使用

安装包

npm install dotenv-webpack --save-dev

创建一个.env.defaults文件

API_URL='dev_url/api/'

创建一个.env文件，保留它为空，使用默认值，在部署过程中更新它 配置webpack - webpack. Config .js

new Dotenv({
  defaults: true 
})

开发环境测试文件。js

console.log(process.env.API_URL)
// Outputs: dev_url/api/

在构建时，更新空的.env文件

API_URL='prod_url/api/'

Dotenv-webpack将使用这个来覆盖env.defaults

产品环境测试文件。js

console.log(process.env.API_URL)
// Outputs: prod_url/api/

dotenv-webpack dotenv-defaults

再给这些问题补充一个答案:

使用ExtendedDefinePlugin而不是DefinePlugin

npm install extended-define-webpack-plugin --save-dev.

ExtendedDefinePlugin使用起来更简单，并且有文档:-) 链接

因为DefinePlugin缺乏良好的文档，我想通过说它实际上像c#中的#DEFINE一样工作来帮助解决问题。

#if (DEBUG)
        Console.WriteLine("Debugging is enabled.");
#endif

因此，如果你想了解DefinePlugin是如何工作的，请阅读c# #define文档。链接