Node.js gulpでwebpackを使う

Node.jsを初めて9日目？（だんだんあやふやになってきた）

複数あるjsファイルを結合するのもめんどくさくなってきたので自動化
ちなみにいままでコマンドラインから

webpack .\js\webpack\entry.js .\public\javascripts\main.js

こんな風にして、jsフォルダのentry.jsをエントリポイントにして、main.jsってのを作成していました。

#gulpfile.jsの書き方

特段他と違いはありません。

gulpfile.js

必要な箇所だけ抜粋で書いています。
var webpack = require('gulp-webpack');

gulp.task('webpack',function(){
    gulp.src(['js/webpack/*.js'])
            .pipe(webpack())
            .pipe(gulp.dest('public/javascripts/'))
})

gulp.task('watch',function(){
        gulp.watch(['js/webpack/*.js'],['webpack'])
})

これだけ。javasciprtsフォルダを除いてみると、
d6c62e82726abbbf54cc.js

なんじゃこら？main.jsにならない。そりゃそうだ。どこにも指定してなかった。
名前を指定しないと、独自にHashの名前を付けてくれるようになっています。

#任意の名前を付けて出力

gulpfile.js

gulp.task('webpack',function(){
    gulp.src(['js/webpack/entry.js'])
    .pipe(webpack({
      output: {
        filename: 'main.js',
      }
     )
    .pipe(gulp.dest('public/javascripts/'))
});

これでpublic/javascripts/main.jsが作成されました。

複数エントリポイントがある場合は、

//本家ドキュメントから引用
gulp.task('default', function() {
     gulp.src('src/entry.js')
    .pipe(webpack({
      entry: {
        app: 'src/app.js',
        test: 'test/test.js',
      },
      output: {
        filename: '[name].js',
      },
    }))
    .pipe(gulp.dest('dist/'));
});

こんなふうにやればよいそうです。
また、別途webpack.config.jsを持っているのであれば

gulp.src('src/entry.js')
  .pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('dist/'));

このようにwebpack.config.jsのありかを示してあげれば、その指示通りに実行してくれるようです。

[参考　本家ドキュメント]https://github.com/shama/gulp-webpack