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

Question

我正在制作an issue 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环境变量设置为＆＃34; production＆＃34;在服务器上。编译和捆绑您的JavaScript源文件的机器。因此，它可以选择不同的webpack配置文件进行生产。

但是当这个javascript代码实际运行时，这个环境变量没有效果。因为javascript代码将在不同计算机上的浏览器上运行。

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

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

Weback -p做广告宣传上面的第二个但似乎有some issues。

Answer 2

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

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

所以不要这样做：

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

您可以指定

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