webpacker の loader 設定の変更
webpacker は以前は install 時にファイルを出力して直接 webpack の設定を変更できたのであるが、現在は webpack の設定を @rails/webpacker という npm package 内にあらかじめ持った loader の設定を load して利用している。
あらかじめ設定されているものをloadするので、使う側は簡単といえば簡単なのであるが、変更を加えようとすると Ruby の世界にないのでオープンクラスほどさっくりといかない。
前提
webpacker 3.0.2, もしくはこれを書いているときの master 8940b2cd8714f666cb4b2a14d5182daa976cfaa6 をもとにしている。
webpack の設定を変更する
config/webpack 以下に js ファイルがあるので、これらをいじって設定を変更する。
% ls -la config/webpack
合計 16K
-rw-r--r-- 1 muryoimpl muryoimpl 93 10月 15 01:57 development.js
-rw-r--r-- 1 muryoimpl muryoimpl 338 10月 15 04:34 environment.js
-rw-r--r-- 1 muryoimpl muryoimpl 93 10月 15 01:57 production.js
-rw-r--r-- 1 muryoimpl muryoimpl 93 10月 15 01:57 test.js今回は全環境に対して変更を加えるものとして、environment.js に変更を入れる。
environment には、Environment class のインスタンス が入っていて、environment.loaders は webpacker/package/loaders ディレクトリのloaderの設定内容が Map になって格納されている。
それぞれのファイル名が Map の key, loader の rule が value になっているので、それを上書きするなり置換するなりしてあげれば更新されるはず。
例えば↓のような感じ。 TypeScript の tsx を jsx に変換した後の jsx を babel で処理したいと思ってこうしてみた。新しい設定はテキトーな名前の key で反映されたっぽいので特に何も考えてない。
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1, 3 +1, 8 @@
const { environment } = require('@rails/webpacker')
+const tsloaderConf = { test: /\.(ts)?(\.erb)?$/, loader: 'ts-loader' }
+const tsxloaderConf = { test: /\.(tsx)?(\.erb)?$/, loader: 'babel-loader!ts-loader' }
+environment.loaders.set('typescript', tsloaderConf)
+environment.loaders.set('tsx', tsxloaderConf)
+
module.exports = environmentとりあえずこれで動いたっぽいのでこのままいくけど、webpacker には loader の設定を merge するような仕組み…はソースみた感じなかった気がするけど、実は公式的な方法があったりする？
)書いてくれているので、「あるある」感を感じる。