使用DefinePlugin后Heroku部署失败，如何保留process.env.PORT？

我完全懂你遇到的麻烦——把webpack -p换成手动配置DefinePlugin和UglifyJsPlugin后，原本能正常读取的Heroku环境变量process.env.PORT被替换成了自定义对象的属性，直接导致部署失败。这问题出在你当前的DefinePlugin配置上：你直接覆盖了整个process.env对象，让Webpack把所有process.env的引用都替换成了只包含NODE_ENV的对象，自然就找不到运行时才会存在的PORT了。

正确的DefinePlugin配置方式 #

你不需要替换整个process.env，只需要单独定义process.env.NODE_ENV即可。这样Webpack只会处理这个特定属性，其他process.env相关的变量会原封不动保留在bundle里，运行时Node.js就能正常读取Heroku的环境变量了。修改后的配置如下：

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

为什么这样能解决问题？ #

• 原来的配置把process.env整个替换成了{"NODE_ENV":"production"}，所以代码里所有process.env.xxx都会指向这个对象的属性，自然没有PORT；
• 现在的配置只针对process.env.NODE_ENV做替换，像process.env.PORT、process.env.NGINX_PORT这类引用会被完整保留，运行时就能正常读取系统环境变量了。

验证效果 #

修改配置后重新构建，你会看到代码变回类似这样：

var PORT = process.env.NGINX_PORT ? '/tmp/nginx.socket' : process.env.PORT;

此时Heroku部署时就能正常读取运行时的PORT环境变量，同时UglifyJsPlugin依然能完成代码压缩，完全达到webpack -p的效果。

内容的提问来源于stack exchange，提问作者Igor-Vuk