webpack --optimize-minimize vs -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="'production'"

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

Answer 1

cross-env NODE_ENV=production

这样，您正在设置 Node 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"。