webpack 如何正确设置`process.env.NODE_ENV`

Question

使用webpack -p 压缩js文件，报了react未切换到生产环境的错误。搜索一番修改配置如下：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)

调用时按如下命令：
NODE_ENV=production webpack --progress --colors
但依然会提示react未切换到生产环境，而且直接console.log(process.env.NODE_ENV)会报undefined.

请问如何在webpack中设置NODE_ENV,或有什么别的方法将react切换到生产环境

Answer 1

这么用：

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: '"production"'
    }
})

再试试

Answer 2

方法一：
在webpack插件中如此定义
new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: '"production"'
    }
})
方法二：
先在package.json
"scripts": {
     "watch": "cross-env NODE_ENV=production  ....."
 }, 
然后在webpack插件配置
new webpack.EnvironmentPlugin(['NODE_ENV']),

Answer 3

我对下面的代码的理解是，只给依赖中注入了环境变量，也就是src文件夹下面的和依赖的模块

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

webpack 的config配置文件中改变环境变量是要通过命令注入

 "scripts": {
    "dev":"cross-env NODE_ENV=production webpack"
  }

或者直接在config文件顶部申明即可

process.env.NODE_ENV = 'production'

个人拙见，如有不对，请指正

Answer 4

http://webpack.github.io/docs...
可以查看此文档，defineplugin的作用是定义全局变量的常量，这些全局变量在compile的过程中会被替换，所以console.log时已经替换了，window下并没有这个变量

Answer 5

new webpack.DefinePlugin({

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

Answer 6

个人写法

const isDev = process.env.NODE_ENV === 'development'
    new webpack.DefinePlugin({
        'process.env': {
         NODE_ENV : isDev ? '"development"' : '"production"'
    }
})