如果与DefinePlugin一起使用，将应用程序部署到Heroku则不起作用

Question

到目前为止，我一直在构建我的webpack包，如webpack -p并部署到Heroku。一切都很好。我希望有更多的控制，所以不使用-p我在我的webpack配置中使用了UglifyJsPlugin和DefinePlugin，因为这正是-p正在做的事情。 这就是问题的起源。

如果我在没有DefinePlugin的情况下使用-p，这就是我的构建文件最后的样子。

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

process.env.PORT正在保存，Heroku的部署工作正在进行中。

如果我使用DefinePlugin

var PORT = Object({"NODE_ENV":"production"}).NGINX_PORT ? '/tmp/nginx.socket' : Object({"NODE_ENV":"production"}).PORT;

我的process.env.PORT不再在这里，并且部署到Heroku失败了。

如何使用DefinePlugin但仍然保持process.env.PORT不变？

这是我的webpack配置

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

和我的开始脚本

"start": "cross-env NODE_ENV=production node ./src/build/bundle.js"

Answer 1

如果你想让process.env.PORT从env获取，只需改变你使用插件的方式。

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

DefinePlugin将翻译您在构造函数中放置的所有内容。这件事发生在你身上，因为你刚刚在顶层有process.env。您必须具体了解您希望它翻译的内容。