webpack -优化-最小化vs -p

Question

我正在做服务器端渲染在我的反应应用程序。在应用程序中，我有一些图片，所以我在webpack-config中为它们提供了loder。

      {
        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'"

因为我已经在设置生产环境，所以我不需要--定义

Answer 1

cross-env NODE_ENV=production

这样，您就可以设置Node process.env.NODE_ENV，而不是在应用程序中“传递”或使用--同时绑定。基本上，您需要为应用程序创建全局变量，并将NODE_ENV设置为webpack所需要的。这就是..。

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

...does。它将使用Webpack DefinePlugin来设置在捆绑应用程序时使用的全局process.env.NODE_ENV。

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

从技术上讲，NODE_ENV是Node.js在运行脚本中公开的一个系统环境变量。它被约定用来通过服务器工具、构建脚本和客户端库来确定dev-vs-prod行为。与预期相反，process.env.NODE_ENV没有在构建脚本中设置为“生产”

有关示例，请参见“指定环境”。