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

Question

我对使用Webpack及其相关构建工具还很陌生，因此这个问题可能有些新手。请理解我。

背景：我正在开发一个客户端Web应用程序（使用Reactjs + Redux），并使用Webpack作为我的构建工具和dev-server加载器。现在，我需要在开发环境中编写一些代码（如记录日志等）。因此，我在网上看到了使用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）

另一个问题是如何在生产或开发环境中启用/禁用功能？只需像这样编写if条件语句：

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

最后一个问题，如果 webpack 真的这样做了，那么它是将这段代码转译为构建的 bundle.js 吗？如果是，对终端用户可见吗？是否需要处理？

希望这不会太麻烦，非常感谢！

- Dima Gimburg

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');
}

根据关于启用/禁用功能的问题，您的代码是有效的。

---

如果您想在条件为假时删除条件体（例如在上面的示例中，您不想在生产环境中显示console.log('this is visible in development');），您应该使用：

new webpack.optimize.UglifyJsPlugin()

它将用false条件替换掉您所有的if语句。

- Everettss

---

太好了！那么隐藏这段代码怎么样？这可行吗？我不希望用户能够看到if语句内部的内容。 - Dima Gimburg