reactjs - webpack --optimize-minimize 与 -p

Question

我正在我的 React 应用程序中进行服务器端渲染。在应用程序内部，我有一些图片，因此我在 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="'生产'"

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

Answer 1

cross-env NODE_ENV=production

这样，您就可以设置节点process.env.NODE_ENV，但在 bundle 时不会在应用程序内“被传递”或使用。基本上，您需要为应用程序创建全局变量，并将 NODE_ENV 设置为 webpack 所需的内容。这就是......

--define process.env.NODE_ENV="'生产'"

...确实如此。它将使用 Webpack DefinePlugin设置在 bundle 应用程序时使用的全局 process.env.NODE_ENV。

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

Technically, NODE_ENV is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, process.env.NODE_ENV is not set to "production" within the build script

参见"Specifying the environment"举个例子。