【gulp】gulp-webpack で複数 JS の書き出し Tips

webpack はエントリーポイントを指定することで複数の JS ファイルの書き出しが可能。
gulp-webpack も公式で以下の方法を紹介している。

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('default', function() {
  return gulp.src(['src/app.js', 'src/test.js'])
    .pipe(named())
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

上記の場合、dist/app.js、dist/test.js が出来上がる。
一つ一つファイル名書くのは面倒なので、glob で省略するとこうなる。

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('default', function() {
  return gulp.src('src/**/*.js')
    .pipe(named())
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

しかしこれ、ファイル名がかぶると想定外のことが起きる。

▼ファイル名がかぶる構成例

src
├─hoge
│  └── app.js
└─fuga
    └── app.js

この場合、出来上がるのは dist/app.js のみで、src/hoge/app.js と src/fuga/app.js がマージされて出力される。

内部的にエントリーポイントはこの様に設定されている。

{
  entry: {
    app: [ '/path/to/src/hoge/app.js', '/path/to/src/fuga/app.js' ]
  }
}

本当に個別に書き出したいなら一工夫が必要。こんな感じ。

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('default', function() {
  return gulp.src('src/**/*.js')
    .pipe(named(function(file) {
      return file.relative.replace(/\.[^\.]+$/, '');
    }))
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

vinyl-named はデフォルトだと拡張子なしのファイル名を返す様になっているので、ディレクトリも含む名前で返してあげるとマージは起きない。
※ file.relative の値は gulp.src の値に左右される点に注意。

内部的にエントリーポイントはこの様に設定されている。

{
  entry: {
    'hoge/app': [ '/path/to/src/hoge/app.js' ],
    'fuga/app': [ '/path/to/src/fuga/app.js' ]
  }
}

これにより、dist 以下には hoge/app.js と fuga/app.js が出来た。