在开发和生产环境中使用 webpack 的环境变量

Question

我对使用像 Webpack 及其亲戚这样的构建工具的世界还很陌生，所以这个问题可能有点菜鸟，但请理解我。

背景：我正在开发一个客户端网络应用程序（使用 reactjs + redux）并使用 webpack 作为我的构建工具和开发服务器加载器。现在我必须只在开发环境中编写一些代码行（日志记录和其他东西）。所以我在网上看到 webpack.DefinePlugin 插件的用法来设置 process.env.NODE_ENV 变量，代码是这样的：

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

然后，如果 NODE_ENV 变量没有在我的机器上设置（目前没有），它会自动设置为开发。我说得对吗？

量产机呢？我需要在 /etc/environment 文件中将此环境变量设置为 'production' 吗？

那么另一个问题是 webpack 如何知道我服务应用程序时 NODE_ENV 是什么？当我在生产机器上构建并在内置 bundle.js 中设置时，它是否被编译？ ($ webpack --progress -p)

另一个问题是我如何enable/disable生产或开发环境中的特性？像这样做一个 if 条件语句：

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

最后一个，如果这真的是 webpack 所做的，那么它是否将这段代码转换为构建的 bundle.js？如果是这样，它对最终用户是可见的吗？这有什么关系吗？

希望不要太多，多谢！

Answer 1

在生产机器上，您可以使用命令构建脚本

NODE_ENV=production webpack

另一方面，将此变量传递给/etc/environment也是解决方案。

process.env.NODE_ENV在bundle.js

中转换为静态字符串

例如，如果您运行 NODE_ENV=production webpack 此片段

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

在 bundle.js 你会发现 （已编辑）

~~if ('production' == 'development') { console.log('this is visible in development'); }~~

if (false) { // 'production' == 'development'
    console.log('this is visible in development');
}

所以根据关于 enable/disable 功能的问题 你的代码是有效的。

如果你想删除条件体，如果它是假的（就像在上面的例子中你不想在 production 环境中显示 console.log('this is visible in development');），你应该使用

new webpack.optimize.UglifyJsPlugin()

它将删除所有带有 false 条件的 if 语句。

在开发和生产环境中使用 webpack 的环境变量

Environment variable with webpack on dev and production

development-environment

environment-variables

webpack

webpack-dev-server