Edited at

webpackのentryファイルを複数指定、globパッケージの使い方


目標

webpackで複数entryを簡単に実現するためのパッケージglobの使い方をまとめます。

関連するドキュメントはネット上にありますが、必要とする情報が分散していたためまとめて記事とします。


前提とする環境

本記事で前提とする環境は以下の通りです。

バージョンが異なる場合は本記事の内容が適用できなくなる場合がありますのでご注意ください。

macOS : 10.14.2

webpack : 4.10.2

glob : 7.1.2


node-glob

Glob

https://github.com/isaacs/node-glob

インストールはnpm上から行えます。

npm i glob


基本的な使い方


webpack.config.js

const glob = require("glob");

const entries = glob.sync("./src/**/*.js");

module.exports = {
entry: entries,
...
}


基本的な記法は、.gitignoreで見慣れたminimatchと同じです。

上記の例の場合、srcフォルダ以下の全てのjsファイルを取り出して、entryに渡しています。

これでディレクトリ構造を保ったまま、複数のentryをwebpackに渡せます。


除外


webpack.config.js

const entries = glob.sync("./src/**/*.js", {

ignore: './src/**/_*.js'
})

第二引数のOptionオブジェクトのignoreに除外パターンを追加することで、検索結果から特定のファイルを除外できます。

上記の例の場合、_から始まるファイルネームを持つファイルを除外します。

ignoreはstringもしくは配列で指定します。複数のパターンを除外する場合は配列を与えます。


検索ディレクトリの変更


webpack.config.js

const entries = glob.sync("**/*.js", {

cwd: "./src"
});

オプションにcwdを設定すると、そのディレクトリをルートとして検索が行われます。

もしも以下のようなファイル群があったとして

./src/script1.js

./src/script2.js
./src/sub/script3.js
./src/sub/script4.js

cwdを設定した結果は

[ "script1.js",

"script2.js",
"sub/script3.js",
"sub/script4.js" ]

という配列で出力されます。


出力フォルダの調整


webpack.config.js

const path = require("path");

const glob = require("glob");

const entries = {};
const srcDir = "./src";
glob.sync("**/*.js", {
ignore: '**/_*.js',
cwd: srcDir
}).map(function (key) {
// {key:value}の連想配列を生成
// { **/*.js : './src/**/*.js' }という形式のobjectになる
entries[key] = path.resolve(srcDir, key);
});

module.exports = {
entry: entries,
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]',
},
...
}


glob.sync()の戻り値はstring配列です。出力フォルダの調整を行う場合、この配列を{key:value}の連想配列に整形する必要があります。

複数エントリー指定の正確な仕様については公式ドキュメントを参照してください。

出力ファイル名は'[name]'と指定しておくことで、entryのファイル名を維持したまま出力が可能です。