複数設定時のwebpack監視オプション

Question

webpack用に2つの設定を作成しました。

configsの配列をエクスポートしているときは、watchオプションではなくすべてが機能します。タスクは単に成功して終了します。

1つの設定をテストすると、エクスポートがうまく動作します。

私は複数のエントリーポイントを試しましたが、その時にも時計はうまく機能しましたが、 でも設定はちょっと面倒です。

アドバイスをお願いします。ありがとうございました。

/* FRONT-END CONFIG */ 
var frontWebpackConfig = { 
    entry: "./src/front/app", 

    output: { 
    path: __dirname + "/build", 
    filename: "public/app.js" 
    }, 

    watch: NODE_ENV == "development", 

    watchOptions : { 
    aggregateTimeout: 100 
    }, 

    devtool : NODE_ENV == "development" ? "cheap-inline-module-source-map" : null, 

    plugins : [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     NODE_ENV : JSON.stringify(NODE_ENV) 
    }) 
    ], 

    module : { 
    loaders : [ 
     { 
     test : /\.js$/, 
     loader : 'babel', 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
    } 
}; 


/* BACK-END CONFIG */ 
var backWebpackConfig = { 
    entry: "./src/back/server", 

    target : 'node', 

    output: { 
    path: __dirname + "/build", 
    filename: "server.js" 
    }, 

    externals: nodeModules, 

    watch: NODE_ENV == "development", 

    watchOptions : { 
    aggregateTimeout: 100 
    }, 

    devtool : NODE_ENV == "development" ? "cheap-inline-module-source-map" : null, 

    plugins : [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     NODE_ENV : JSON.stringify(NODE_ENV) 
    }) 
    ], 

    module : { 
    loaders : [ 
     { 
     test : /\.js$/, 
     loader : 'babel', 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    } 
} 


/* EXPORTS */ 
module.exports = [frontWebpackConfig, backWebpackConfig] 

はまた、私はこの表現chekedました： "NODE_ENV == "開発"" 値を、直接trueを設定してみました。

更新：面白いことに、私はちょうどコマンドラインで " - watch"オプションを付けて起動しようとしましたが、うまくいきました。ファイル設定が機能しない理由は何ですか？

Answer 1

watch isn't a configuration option in Webpack。あなたが提案してきたように、あなたは、CLI上でそれを渡すか、ノードのAPIを使用した場合の代わりrunのwatchを呼び出すためのいずれかの必要があります。

compiler.watch({ ...watchOptions }, function(err, stats) { 
    // ... 
}); 

Answer 2

は実際には、はwebpack 1.13.0+でwatchためのオプションがあります。

しかし、いくつかの構成（オブジェクトの配列）の場合は、watchプロパティを配列に設定して機能させる必要があるようです。最終的には、最初の構成オブジェクトのwatchOptionsプロパティが使用されます。コマンドラインで

/* FRONT-END CONFIG */ 
var frontWebpackConfig = { 
    entry: "./src/front/app", 
    // ... 
    watch: NODE_ENV == "development", 
    watchOptions : { 
     aggregateTimeout: 100, 
    }, 
}; 

/* BACK-END CONFIG */ 
var backWebpackConfig = { 
    entry: "./src/back/server", 
    // ... 
}; 

var configuration = [frontWebpackConfig, backWebpackConfig]; 
configuration.watch = true; 

/* EXPORTS */ 
module.exports = configuration; 

--watch引数はちょうどそれが期待されますようCLI引数を使用して動作する理由です、コンフィギュレーションのロードと処理中にアレイにwatchプロパティを設定します。