webpack上でglobを使う方法について、業務で触れることがあったのでメモ。
インストール
なにはともあれインストール。
$ npm init -y
$ npm install webpack glob
ディレクトリ構造
ディレクトリを以下のように作りました。
src/にJSファイルが格納されています。
src/common, src/pc, src/sp, それぞれにentry.jsがあり、これがバンドル対象です。
中身はこんな感じです。a.js, b.jsがモジュールになってる感じですね。
dist/がバンドルファイルの格納先となります。
webpack.config.js
webpackとはつまりconfigを書くことと見たり。
configは以下のようになりました。
glob.syncを利用して、ファイルを検索しています。
そして、メソッドチェーンでマッピングを行っています。マッピングを行うのは、webpackのentryの値に合わせるためです。
globの検索結果が配列で返ってくるのに対して、webpackのentryはオブジェクトを要求します。
実行
いざ、webpackを実行します。
その結果が以下のとおり。
きちんとentry.jsだけが読み取られ、バンドルされていますね。
しかも嬉しい副作用として、生成後のバンドルには元のディレクトリ構造まで反映されました。
あ、でも、dist/src/はおかしい。。。うーむ。ひとまず、webpack上でglobが使えました。ということで。
