webpackの複数のインスタンスを同時に実行できますか？

Question

私はいつも一緒に含まれていないので、独自のソースを吐く必要があるコンポーネントの配列を持っているとしましょう、それはそれ自身のバンドルである必要があります。アイデアは最終的には100種類のコンポーネントがあり、いつでもチェリーを選ぶことができるということです。

しかし、webpack-streamをgulpと使用すると、私は動的にタスクを登録していても、それらが順番に実行されているのがわかりますが、見た目では1つのWebpackストリームしか実行されませんが、 SECONDコンポーネントから最初のcomponentsディレクトリにバンドルします。

それはそうのようなコンポーネントの配列ですが、非常に単純なビルドプロセスです：

var components = [ 
    {'name : 'a', src : './foo/bar/entrya.js', dest : '/dir/a'}, 
    {'name : 'b', src : './foo/bar/entryb.js', dest : '/dir/b'}, 
]; 

比較的単純な右？

components.forEach(component => { 
    gulp.task(component.name, cb => { 

     function task(component) { 
      return gulp.src(component.src) 
      .pipe($.webpackStream(webpackConfig)) 
      .pipe(component.dest(component.dest)); 
     } 

     return task.apply(this, [component, cb]); 
    }); 
}); 

これは私が持っているものの非常にダウン易しく書き直さバージョンですが、それは我々が順次これらのタスクを実行後に、その後、ほとんど同じことだ動的に生成し、：その後、タスクを登録するには、それはこのようなものです。

Answer 1

webpack-streamは、複数のエントリポイントごとに複数のエントリポイントと複数のビルドを処理できます。

var gulp = require('gulp'); 
var webpack = require('webpack-stream'); 
gulp.task('build', function() { 
    return gulp.src(['src/entry.js']) // entry.js file doesn't need to exist 
    .pipe(webpack({ 
     entry: { 
     a : __dirname + "/foo/bar/entrya.js", 
     b : __dirname + "/foo/bar/entryb.js" 
     }, 
     output: { 
     filename: '[name].js' 
     } 
    })) 
    .pipe(gulp.dest('dir/')); 
}); 

Answer 2

ビルドが並行して実行されていません。あなたは順番にタスクを登録しています。ただし、これらのタスクを子プロセスとして並列に実行できます。使用できる良いオプションの1つはparallel-webpackです。