gulp-webpackで複数のファイルをコンパイルするときに注意する点のメモ

問題

• gulp-webpackでは、webpackを内部で呼び出している。
• その際、copyせずにentryやoutputにデータを入れてstream対応している。
• 公式ドキュメントのようにwebpack(require("webpack.config"))するとrequireのキャッシュにより、同じオブジェクトが参照される。
• 結果ファイル名が同一になり、保存のタイミング次第でA用の結果がBに出力されることがある。

対策

webpack.configのオブジェクトを毎回違うものにする。

var config = module.exports = function() {
    // 毎回別のもにして、生成する
    return {
        externals: {
            "jquery": "jQuery"
        },
        resolve: {
            root: "./js"
        },
        extensions: ['', '.js']
    };
};

そして、都度関数を呼び出して別のオブジェクトにする。

return gulp.src(ROOT_DIR + src)
       .pipe(webpack(require('./webpack.config.js')()))
       .pipe(rename(dst))
       .pipe(gulp.dest(DST_DIR));

一応このように対策したけど、なにかが間違っている気もするけどメモとして。