Laravel
glob
webpack

webpack.mix.jsのソースファイルをglobのワイルドカードで指定する

More than 1 year has passed since last update.

Laravelのwebpack.mix.jsはwebpackを簡潔に書ける強力なツールですが、gulpfileのように標準でglobによるワイルドカード指定ができないので、ページによりjsやcssを分けようとするといちいちコンパイル元のソースを書き足していかないといけません(標準でglobがないのは通常のwebpackでも同じですが)。

それは面倒なので、globをインストールして使用してワイルドカードでファイル指定をするようにします。


webpack.mix.js

const glob = require('glob');

// sassディレクトリ直下のscssファイルを全てコンパイル
glob.sync('resources/assets/sass/*.scss').map(function(file) {
mix.sass(file, 'public/assets/css');
});

// jsファイルを連結・圧縮
mix.scripts(glob.sync('resources/assets/js/modules/vendors/*.js'), 'public/assets/js/vendors.js');


glob.sync(pattern)でファイルパスの文字列を要素にとる配列が返ってくるので、それをそれぞれコンパイルするか、配列を取れるmix.scriptsならそのまま引数にぶちこみます。

webpackに限らず基本的にいろいろなところで使えそうですね。glob便利。


参考サイト

アセットのコンパイル(Laravel Mix) 5.4 Laravel

isaacs/node-glob: glob functionality for node.js