Webpack：-p对NODE_ENV=production对process.env.NODE_ENV

Question

在生产过程中，我和webpack一起使用问题，而且在生产环境中运行webpack的不同方式让我感到困惑(我使用的是Windows)。

有人能解释一下这两者之间的区别吗？

第一: CLI

• webpack -p

二: CLI

• SET NODE_ENV=production
• webpack

三: webpack.config.js

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

我正在使用React，并且需要构建一个生产版本，这个版本是小型化的，并且包含了React的生产版本。

Answer 1

SET NODE_ENV=production在服务器上将NODE_ENV环境变量设置为"production“。编译和打包您的javascript源文件的机器。例如，它可以为生产选择不同的webpack配置文件。

但是，当这个javascript代码实际运行时，这个环境变量没有任何影响。因为javascript代码将在另一台机器的浏览器上运行。

providePlugin帮助在浏览器中设置NODE_ENV变量。你的javascript实际上运行的地方。实际上，它真正做的是用process.env.NODE_ENV替换出现的"production"，而不是设置变量。但效果是一样的。

编辑：实际上应该为此目的使用DefinePlugin。

Weback -p广告说要做上面的第二件事，但似乎有一些问题。

Answer 2

基于webpack文献设置，webpack -p执行以下操作

• 利用UglifyJSPlugin进行小型化
• 运行LoaderOptionsPlugin
• 设置节点环境变量

因此，与其做：

"scripts": {
  "dist": "NODE_ENV=production webpack",
  "start": "webpack"
}

您只需指定

"scripts": {
  "dist": "webpack -p",
  "start": "webpack"
}