这里有一种方法，对我来说是有效的，并允许我通过重用json文件保持我的环境变量DRY。

const webpack = require('webpack');
let config = require('./settings.json');
if (__PROD__) {
    config = require('./settings-prod.json');
}

const envVars = {};
Object.keys(config).forEach((key) => {
    envVars[key] = JSON.stringify(config[key]);
});

new webpack.DefinePlugin({
    'process.env': envVars
}),

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

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问题

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

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',
    ...
};

你可以使用——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

只是另一个选项，如果你只想使用cli界面，只需使用webpack的define选项。我在包中添加了以下脚本。json:

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

我只需要运行npm运行build-production。

我发现下面的解决方案是最容易为Webpack 2设置环境变量:

例如，我们有一个webpack设置:

var webpack = require('webpack')

let webpackConfig = (env) => { // Passing envirmonment through
                                // function is important here
    return {
        entry: {
        // entries
        },

        output: {
        // outputs
        },

        plugins: [
        // plugins
        ],

        module: {
        // modules
        },

        resolve: {
        // resolves
        }

    }
};

module.exports = webpackConfig;

在Webpack中添加环境变量:

plugins: [
    new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
       }),
]

定义插件变量并将其添加到插件中:

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

现在当运行webpack命令时，传递env。NODE_ENV作为参数:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

现在您可以在代码中的任何地方访问NODE_ENV变量。