開発を開発に追加Webpackの設定に戻す

Question

私は可能な限り単純なReact環境を持っています。 これは開発において非常に効率的です。

var webpack = require('webpack'); 

const config = { 
    entry: "./index.js", 
    output: { filename: "bundle.js" }, 
    devtool: 'eval', 
module: { 
    loaders: [ 
    { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'env'] } } 
    ] 
    } 
}; 

module.exports = config; 

私は何をしたいことは、次のようにコンソールスクリプトで実行するように生産ビルドを追加することです：「構築」

：package.jsonで定義されているビルドを実行NPM「のWebPACK --config webpack.config.js "

プロダクションプラグインとdevtool：" cheap-module-source-map "をどのように追加すれば、本番環境でのみ動作し、開発には含まれないようにすることができます。生産プラグインによって私はこれらのことを意味：

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

私はあなたが環境変数とのトラブルを抱えているようですねdevtool: debug ? "cheap-module-source-map" : "eval", と

plugins: debug ? [] : [//production plugins here ]

Answer 1

で

var debug = process.env.NODE_ENV !== "production"; 

を使用することができませんでした、それは確かに行く方法です。あなたが詳細を投稿すると、私は問題を理解するのを助けることができます。

別の方法として、devconfigの設定をwebpack-prod.config.jsというファイルにコピーし、そこにプロダクションを追加することができます。 "build": "webpack --config webpack-prod.config.js"

Answer 2

プロダクション設定用に別のファイルを作成し、プロパティを変更するのが一般的です。

webpack.config.production.js：

var webpack = require('webpack'); 
var config = require('./webpack.config'); 

config.devtool = 'cheap-module-source-map'; 
config.plugins = (config.plugins || []).concat([ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    new webpack.optimize.UglifyJsPlugin() 
]); 

module.exports = config;