Webpack2 + Gulp で複数の書き出し先、複数の設定のコンパイルをする

やりたいこと

• 別々の場所に書き出したい
  • 複数のjavascriptファイルを書き出したい
  • 書き出し先は別々にしたい
  • minifyなどの設定は共通
• 異なる設定で書き出したい
  • 複数のjavascriptファイルを書き出したい
  • 書き出し先は別々にしたい
  • 「minifyする」、「node_modulesを内包しない」などの設定を変更したい

別々の場所に書き出したい

entry で指定した key が [name] に入るので、そこにパスを記述します。

webpack.config.js

module.exports = {
    // 入力ファイル
    entry: {
        "file1": "./src/js/file1.js",
        "dir2/file2": "./src/js/file2.js"
    },
    // 出力ファイル（出力先のベースパスはGulp側で指定しています）
    output: {
        filename: "[name].bundle.js",
    },
    // 〜略〜

↓

dist/js/file1.bundle.js
dist/js/dir2/file2.bundle.js

異なる設定で書き出したい

Gulp の設定で Webpack の設定を指定しているので、それを変更します。

gulpfile.js

// 共通
var path = {
    src: 'src/',
    dist: 'dist/'
};
var webpack_stream = require('webpack-stream');
var webpack = require('webpack');

// タイプ別 A
var webpack_A_src = [path.src + "js/typeA/*.js", path.src + "js/typeA/**/*.js"];
var webpack_A_dist = path.dist + "js/typeA/";
gulp.task("webpack_A", function(){
    gulp.src(webpack_A_src)
    .pipe(plumber())
    // 通常は webpack.config.js を指定する場所を変更している
    .pipe(webpack_stream(require('./webpack_A.js'), webpack))
    .pipe(gulp.dest(webpack_A_dist));
});

// タイプ別 B
var webpack_B_src = [path.src + "js/typeB/*.js", path.src + "js/typeB/**/*.js"];
var webpack_B_dist = path.dist + "js/typeB/";
gulp.task("webpack_B", function(){
    gulp.src(webpack_B_src)
    .pipe(plumber())
    // 通常は webpack.config.js を指定する場所を変更している
    .pipe(webpack_stream(require('./webpack_B.js'), webpack))
    .pipe(gulp.dest(webpack_B_dist));
});