生産のためにウェブパックバンドルに反応する

Question

生産用に出力をバンドルするにはいくつかの助けが必要ですが、どのようにすればいいのか分かりません。ここに私のwebpack.config.js

module.exports = { 
    devtool: 'eval', 
    context: __dirname, 
    entry: "./js-source/index.jsx", 
    output: { 
     path: __dirname + "/scripts", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.(js|jsx)$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      } 
     ], 
     resolve: { 
      extensions: ['', '.js', '.jsx', '.json'] 
     } 
    } 
}; 

だここに私のpackage.jsonはどのようにあなたが通常生産に束ねない

{ 
    "name": "citygross-store-web", 
    "version": "2.0.0", 
    "dependencies": { 
    "axios": "^0.14.0", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^4.1.2", 
    "react-responsive": "^1.3.0", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1", 
    "react-transition-group": "^1.2.0", 
    "redux": "^3.1.2", 
    "redux-logger": "^2.6.1", 
    "redux-promise-middleware": "^4.0.0", 
    "redux-thunk": "^2.1.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-plugin-transform-runtime": "^6.15.0", 
    "babel-polyfill": "^6.3.14", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-latest": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "babel-preset-stage-0": "^6.24.1", 
    "babel-preset-stage-1": "^6.24.1", 
    "babel-preset-stage-2": "^6.13.0", 
    "webpack": "^1.14.0", 
    "webpack-hot-middleware": "^2.12.2" 
    }, 
    "scripts": { 
    "build": "webpack --colors", 
    "dev": "webpack --watch --colors" 
    }, 
    "-vs-binding": { 
    "ProjectOpened": [ 
     "dev" 
    ] 
    } 
} 

ですか？ "npm run build"のようなコマンドを追加し、その設定で他の設定を行うことで？

誰かがこれを設定する方法を私に教えることができたら、私は感謝します。今は "npm run dev"と "npm run build"を行うことができますが、2つ以上の "dev dev"を使用して-watcherを作成し、ビルドを1回ビルドするのに違いはありません。

Answer 1

ビルドスクリプトの実行時に、環境変数NODE_ENVをproductionに設定します。これにより、Reactの生産ビルドが出力に含まれます。

最も簡単な方法は、あなたのpackage.jsonに別のスクリプトを追加することです：

"scripts": { 
    "build": "webpack --colors", 
    "buildprod": "NODE_ENV=production webpack --colors", 
    "dev": "webpack --watch --colors" 
    }, 

あなたがnpm run buildprodを行うときに今、あなたのコードの生産ビルドを取得します。

注：Windowsの場合、上記は正しく機能しません。用

"scripts": { 
    "build": "webpack --colors", 
    "buildprod": "cross-env NODE_ENV=production webpack --colors", 
    "dev": "webpack --watch --colors" 
    },