在源代码中使用NODE_ENV来控制Webpack的构build过程

我在我的项目中设置了Redux DevTools( https://www.npmjs.com/package/redux-devtools ),并且想要在构build我的项目进行生产时排除DevTools。 该文件说这可以通过使用这个代码来完成:

if (process.env.NODE_ENV === 'production') { module.exports = require('./configureStore.prod'); } else { module.exports = require('./configureStore.dev'); } 

我已经有一个常量模块,所以我已经把NODE_ENV的检查。

 Constants.PRODUCTION = process.env.NODE_ENV === 'production' 

在我的Webpackconfiguration文件中,我有下面的代码,它应该像它应该:

 const production = process.env.NODE_ENV === 'production' var config = { // configuration goes here } if (production) { config.plugins = [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, }), ].concat(config.plugins) } 

当运行set NODE_ENV=production&&webpack ,构build得到了缩小,并且使用webpack缩小构build。 但是,在源代码本身中,NODE_ENV是未定义的:

 console.log(process.env.NODE_ENV) // Output: Undefined 

如果我将Constants.PRODUCTION设置为true那么DevTools不包含在构build中。 不知何故,我应该使用DefinePlugin或ProvidePlugin(Redux DevTools文档提到他们两个,但在不同的地方),但我不知道如何。 我正在使用Windows 10,DevTools 3.0.0和npm脚本来运行构build过程。 任何人都可以帮助我如何在我的webpackconfiguration文件中设置DefinePlugin或ProvidePlugin?

Solutions Collecting From Web of "在源代码中使用NODE_ENV来控制Webpack的构build过程"

我自己解决了 在webpack配置文件中,我添加了这个:

 plugins: [ // Some other plugins new webpack.DefinePlugin({ PRODUCTION: production, }) ] 

我将我的常量模块中的代码更改为

 Constants.PRODUCTION = PRODUCTION 

这是有效的。 现在运行我的npm脚本时,我得到了一个没有模块的版本,因为在uglifying期间完全删除了,我可以像以前一样启动webpack dev服务器,然后加载Redux DevTools:

 "scripts": { "start": "set NODE_ENV=development&&webpack-dev-server", "build": "set NODE_ENV=production&&webpack --progress --colors" } 

现在问题中的第一个代码片段如下所示:

 if (Constants.PRODUCTION) { module.exports = require('./configureStore.prod'); } else { module.exports = require('./configureStore.dev'); } 

基于webpack文档 。 设置webpack -p将执行以下操作

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

因此,而不是手动设置NODE_ENV所有你需要做的就是设置-p标志。 像这样的东西

 "scripts": { "start": "webpack-dev-server", "build": "webpack -p --progress --colors" }