Webpack：-p vs NODE_ENV=production vs process.env.NODE_ENV答案

【问题标题】：Webpack: -p vs NODE_ENV=production vs process.env.NODE_ENVWebpack：-p vs NODE_ENV=production vs process.env.NODE_ENV
【发布时间】：2016-11-07 16:13:30
【问题描述】：

我在生产环境中使用了带有 webpack 的 an issue，我对在生产环境中运行 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 的生产版本。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

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

但是当这个 javascript 代码实际运行时，这个环境变量不起作用。因为 javascript 代码将在不同机器的浏览器上运行。

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

编辑：实际上应该使用DefinePlugin。

Weback -p 宣称要做上面的第二个，但似乎有 some issues。

【讨论】：

【解决方案2】：

基于webpack documentation 设置webpack -p 执行以下操作

使用 UglifyJSPlugin 进行缩小
运行 LoaderOptionsPlugin
设置节点环境变量

所以不要这样做：

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

你可以指定

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

【讨论】：