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

More than 1 year has passed since last update.


やりたいこと


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


    • 複数の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));
});