Зачем нужен webpack для NODE_ENV?

Question

Я использую webpack + react + redux в веб-приложении. И я использую webpack-dev-server для запуска веб-сервера dev. Когда я получить доступ к моему приложению на браузере, это дает ниже сообщения об ошибке на консоли:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. 

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify to ensure you have the correct code for your production build. 

Ниже мой файл webpack.config.js. Я не указывал режим производства, почему webpack дает мне такое предупреждение? И как я могу избавиться от него?

const webpack = require('webpack'); 
const path = require('path'); 
const NpmInstallPlugin = require('npm-install-webpack-plugin'); 
const WebpackShellPlugin = require('webpack-shell-plugin'); 
var CompressionPlugin = require("compression-webpack-plugin"); 

const PATHS = { 
    react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), 
    app: path.join(__dirname, 'src'), 
    build: path.join(__dirname, './dist') 
}; 

module.exports = { 
    entry: { 
    app: './app/index.jsx', 
    android: './app/utils/platform_android.js', 
    ios: './app/utils/platform_ios.js', 
    web: './app/utils/platform_web.js', 
    vendor: [ 
     'axios', 
     'react', 
     'react-dom', 
     'react-redux', 
     'react-router', 
     'react-router-redux', 
     'redux', 
     'redux-thunk', 
     'react-alert', 
     'sha1', 
     'moment', 
     'nuka-carousel', 
     'react-cookie', 
     'material-ui', 
     'react-spinkit', 
     'react-tap-event-plugin', 
     'react-tappable', 
    ], 
    }, 
    output: { 
    path: PATHS.build, 
    filename: '[name].bundle.js', 
    }, 
    watch: true, 
    devtool: 'source-map', 
    relativeUrls: true, 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.css', '.less'], 
    modulesDirectories: ['node_modules'], 
    alias: { 
     normalize_css: __dirname + '/node_modules/normalize.css/normalize.css', 
    } 
    }, 
    module: { 
    preLoaders: [ 

     { 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     // { 
     // test: /\.js$/, 
     // exclude: /node_modules/, 
     // loader: 'jshint-loader' 

     // } 
    ], 
    loaders: [ 

     { 
     test: /\.html$/, 
     loader: 'file?name=[name].[ext]', 
     }, 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader?presets=es2015', 
     }, 
     { 
     test: /\.less$/, 
     loader: "style!css!less", 
     }, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /\.png$/, loader: "url-loader?limit=100000"}, 

     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader?presets=es2015'] 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'svg-sprite', 
     include: /public\/icons/ 
    } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false, 
     }, 
     output: { 
     comments: false, 
     }, 
    }), 
    new NpmInstallPlugin({ 
     save: true // --save 
    }), 

    new CompressionPlugin({ 
     asset: "[path].gz[query]", 
     algorithm: "gzip", 
     test: /\.js$|\.html$/, 
     threshold: 10240, 
     minRatio: 0.8 
    }), 
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */["vendor"], /* filename= */"[name].bundle.js", Infinity), 
    ], 
    devServer: { 
    colors: true, 
    contentBase: __dirname, 
    historyApiFallback: true, 
    hot: true, 
    inline: true, 
    port: 9093, 
    progress: true, 
    stats: { 
     cached: false 
    } 
    } 
} 

EDIT1:

я удалил эту строку:

react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), 

Затем обновил NODE_ENV на развитие, как показано ниже:

new webpack.DefinePlugin({ 
     "process.env": { 
     NODE_ENV: JSON.stringify("development") 
     } 
    }) 

Тогда я еще получил такое же предупреждение ,

warning.js:14You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build. 

Answer 1

Предупреждение Вы получаете сейчас, потому что вы позволяете Webpack Минимизировать ваш но вы все еще устанавливаете NODE_ENV в development.

Если вы используете UglifyJsPlugin, вы всегда должны установить NODE_ENV на production. Если вы не строите для производства, удалите UglifyJsPlugin, чтобы не получить никаких предупреждений.

Webpack, React и Redux попытаются дать вам рекомендации по лучшей практике здесь. В режиме разработки (NODE_ENV не установлено значение production), все они дают больше предупреждений и имеют более низкую производительность. Когда вы их минимизируете, они предполагают, что вы используете производственную сборку. Для производственных сборок они действительно ожидают, что NODE_ENV будет установлен правильно.

Так короче:

• Производство сборки: набор NODE_ENV для production и использовать UglifyJsPlugin.
• Dev builds: установите NODE_ENV на номер development и не используйте плагины для минимизации.

Answer 2

Я не знаю, как сказать это более ясно, чем WebPack делает ...

Вы не в режиме сборки производства, но с использованием Минимизированных версий React. Используйте не-уменьшенная один, поэтому заменить

react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), 

с

react: path.join(__dirname, 'node_modules/react/dist/react.js'), 

или любое место, где у вас есть ваши реакции не уменьшенная.

И это не ошибка - это предупреждение, поэтому вы можете работать с этим.

Еще одна вещь: path.join добавляет правильные слэши для каждой операционной системы. Что вы делаете здесь

path.join(__dirname, 'node_modules/react/dist/react.min.js') 

, когда вы должны пойти с

path.join(__dirname, 'node_modules', 'react', 'dist', 'react.min.js') 

Это как path следует правильно использовать

Answer 3

Я исправил его, удалив ниже конфигурации из webpack.config.js для сборки разработки. Похоже, что этот плагин сжимает js-код, который не подходит для режима разработки.

new webpack.optimize.UglifyJsPlugin({ 
    compress: { 
    warnings: false, 
    }, 
    output: { 
    comments: false, 
    }, 
})