Question

我在反应应用程序中进行服务器端渲染。在应用程序内部我有一些图片，所以我在webpack-config

中为他们提供了帮助

      {
        test: /\.(gif|png|jpg)$/,
        loader: 'file-loader?name=assets/img/[name].[hash].[ext]',
      },

如果我以这种方式运行我的代码

cross-env NODE_ENV=production webpack --optimize-minimize --config webpack.config.prod.js,

我收到错误

Warning: Prop `src` did not match. Server: "assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg" Client: "/assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg"

但如果我像这样运行

cross-env NODE_ENV=production webpack --p --config webpack.config.prod.js,

一切都很好，功能完全像我想要的那样。

为什么？

我读-p相当于

webpack --optimize-minimize --define process.env.NODE_ENV="'production'"

由于我已经设置了生产环境，因此我不需要--define

Answer 1

cross-env NODE_ENV=production

有了这个，你正在设置节点process.env.NODE_ENV但是在应用程序内部没有“被传递”或使用 - 在捆绑时 - 。基本上，您需要为应用程序创建全局变量，并将NODE_ENV设置为webpack所需的内容。这就是......

--define process.env.NODE_ENV="'production'"

...一样。它将使用Webpack DefinePlugin设置在捆绑应用时使用的全局process.env.NODE_ENV。

我知道这听起来有点不清楚，我自己也很难理解，但希望文档会清除它。

从技术上讲，NODE_ENV是Node.js的系统环境变量暴露在运行脚本中。按惯例用于确定服务器工具，构建脚本和客户端的dev-vs-prod行为库。与预期相反，未设置process.env.NODE_ENV 在构建脚本中“生产”

有关示例，请参阅"Specifying the environment"。

webpack --optimize-minimize vs -p

1 个答案: