読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

webpack上でglobを使う

webpack上でglobを使う方法について、業務で触れることがあったのでメモ。

 

インストール

なにはともあれインストール。

$ npm init -y

$ npm install webpack glob

 

ディレクトリ構造

ディレクトリを以下のように作りました。

f:id:chuck0523:20160320205110p:plain

src/にJSファイルが格納されています。

src/common, src/pc, src/sp, それぞれにentry.jsがあり、これがバンドル対象です。

中身はこんな感じです。a.js, b.jsがモジュールになってる感じですね。

gist61f0bb07397dcedd79d8

 

dist/がバンドルファイルの格納先となります。

 

webpack.config.js

webpackとはつまりconfigを書くことと見たり。

configは以下のようになりました。

gista469bd28b425bdf4d054

 

glob.syncを利用して、ファイルを検索しています。

そして、メソッドチェーンでマッピングを行っています。マッピングを行うのは、webpackのentryの値に合わせるためです。

globの検索結果が配列で返ってくるのに対して、webpackのentryはオブジェクトを要求します。

 

実行

いざ、webpackを実行します。

その結果が以下のとおり。

f:id:chuck0523:20160320205548p:plain

きちんとentry.jsだけが読み取られ、バンドルされていますね。

 

しかも嬉しい副作用として、生成後のバンドルには元のディレクトリ構造まで反映されました。

f:id:chuck0523:20160320205716p:plain

あ、でも、dist/src/はおかしい。。。うーむ。ひとまず、webpack上でglobが使えました。ということで。