React Appは生産モードのNODE_ENVを無視します

Question

私はReactにかなり新しく、webpackをモジュールバンドラとnpmとして使用してクライアントサイドのリアクションアプリを構築しました。これはWebpack devServerを使用した開発でスムーズに動作します。プロダクションではExpressをサーバーとして使用しました。 localhost：8080で実行しているとうまく表示されますが、これらの警告が表示されます。私はNODE_ENV = 'production'を設定しましたが、それでも同じ警告が表示されます。ここで

は私の生産・コンフィギュレーション・ファイル

production.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 
const webpack = require('webpack') 
const path = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 



const config ={ 
devtool: 'cheap-module-source-map', 


    entry: [ 
    'react-hot-loader/patch', 
    './client/main.js' 
    ], 

    output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'app.bundle.js', 
    publicPath:'/' 

    }, 


    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'css-loader', 
       //query: { sourceMap: false }, 
       options: { 
       importLoaders: 1, 
       } 
      }, 
      { 
       loader: 'postcss-loader' 
      } 
      ] 

     }) 
     }, 
     { 
     test: /\.jsx?$/, 
     use: 'babel-loader', 
     exclude: /node_modules/ 
     }, 

     { 
     test: /\.(png|jpe?g|gif|svg|ico|\.woff$|\.ttf$|\.wav$|\.mp3$)$/i, 
     use: ['file-loader?name=img/[name].[ext]', 
      'image-webpack-loader'] 

     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=fonts/[name].[ext]' 

     } 
    ] 
    }, 

    plugins: [ 
    //index.html custom template 
    new HtmlWebpackPlugin({ 
     title: 'Index', 
     template: './index.html' 

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

    //extract css files 
    new ExtractTextPlugin({filename:"styles.css",disable:false,allChunks:true}), 
    new UglifyJsPlugin({ 
     sourceMap: false, 
     mangle: true, 
     beautify:false, 
     compress: { 
     warnings: false, // Suppress uglification warnings 
     pure_getters: true, 
     unsafe: true, 
     unsafe_comps: true, 
     screw_ie8: true 
     }, 
     output: { 
     comments: false 
     } 
    }) 


    ] 
}; 

module.exports=config 

package.json

{ 
    "name": "react-app", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "webpack": "webpack", 
    "dev": "webpack-dev-server --colors", 
    "prod": "npm run build && node deploy.js", 
    "build": "webpack --config production.config.js --progress --colors" 
     } 

//依存関係が を省略している}である

Answer 1

は、このパッケージを使用してみてください：https://www.npmjs.com/package/cross-env

私はそれを解決し、WindowsのコマンドプロンプトでNODE_ENV =生産を設定することに問題があると信じています。

使用例：

ビルド・スクリプト：

cross-env NODE_ENV=production webpack 

webpack.config.js：助け

const webpack = require('webpack'); 

const env = process.env.NODE_ENV || 'production'; 

//... 

plugins = [ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify(env) 
    } 
    }) 
] 

//... 

希望。