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

定义插件

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

请注意，这只会“按原样”替换匹配项。这就是字符串采用其格式的原因。你可以有一个更复杂的结构，比如一个对象，但你明白了。

环境插件

new webpack.EnvironmentPlugin(['NODE_ENV'])

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

别名

或者，您可以通过别名module使用配置。从消费者方面来看，它看起来像这样：

var config = require('config');

配置本身可能如下所示：

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

让我们说process.env.NODE_ENV是development。它会映射到./config/development.js那时。它映射到的module可以像这样导出配置：

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

只是另一种选择，如果您只想使用 cli 界面，只需使用definewebpack的选项。我在我的中添加以下脚本package.json：

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

所以我只需要跑npm run build-production。

我研究了几个关于如何设置特定于环境的变量的选项，最后得到了这个：

我目前有 2 个 webpack 配置：

webpack.production.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

webpack.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }
}),

在我的代码中，我以这种（简短的）方式获取 API_URL 的值：

const apiUrl = process.env.API_URL;

编辑 2016 年 11 月 3 日

Webpack 文档有一个例子：https ://webpack.js.org/plugins/define-plugin/#usage

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

使用ESLint，如果您有no-undef规则，您需要在代码中明确允许未定义的变量。http://eslint.org/docs/rules/no-undef像这样：

/*global TWO*/
console.log('Running App version ' + TWO);

编辑 2017 年 9 月 7 日（特定于 Create-React-App）

如果您不想配置太多，请查看 Create-React-App：Create-React-App - 添加自定义环境变量。在幕后，CRA 无论如何都使用 Webpack。

你可以通过任何命令行参数，无需额外的插件使用--env以来的WebPack 2：

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

使用 webpack.config.js 中的变量：

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

来源

在转译过程中，您可以直接使用EnvironmentPluginavailable inwebpack来访问任何环境变量。

你只需要在你的webpack.config.js文件中声明插件：

var webpack = require('webpack');

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

请注意，您必须明确声明要使用的环境变量的名称。