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

2018/06/17
JavaScriptglobwebpack

目標

webpackで複数entryを簡単に実現するためのパッケージglobの使い方をまとめます。関連するドキュメントはネット上にありますが、必要とする情報が分散していたためまとめて記事とします。

前提とする環境

本記事で前提とする環境は以下の通りです。バージョンが異なる場合、この記事の内容は適用できない場合があります。記事を読む前にバージョンをご確認ください。

macOS : 10.15.6
webpack : 4.44.1
glob : 7.1.6

node-glob

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

https://github.com

インストールは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'
})

第2引数の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 srcDir = "./src";
const entries = glob
  .sync("**/*.js", {
    ignore: "**/_*.js",
    cwd: srcDir,
  })
  .map(function (key) {
    // [ '**/*.js' , './src/**/*.js' ]という形式の配列になる
    return [key, path.resolve(srcDir, key)];
  });

// 配列→{key:value}の連想配列へ変換
const entryObj = Object.fromEntries(entries);

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

glob.sync()の戻り値はstring配列です。出力フォルダーの調整を行う場合、この配列を{key:value}の連想配列に整形する必要があります。複数エントリー指定の正確な仕様については公式ドキュメントを参照してください。出力ファイル名は'[name]'と指定しておくことで、entryのファイル名を維持したまま出力が可能です。