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

Question

我对使用像Webpack及其亲戚这样的构建工具的世界很新,所以也许这个问题有点小,但请理解我.

背景:我正在开发一个客户端Web应用程序(使用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我的机器上没有设置varibale(此时不是),它会自动设置为开发.我对吗？

生产机器怎么样？我需要将此env变量设置为/etc/environment文件中的"生产" 吗？

那么另一个问题是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吗？如果是这样,最终用户可以看到它吗？那有什么关系吗？

希望它不是很多,谢谢一堆!

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');在production环境中显示),你应该使用

new webpack.optimize.UglifyJsPlugin()

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