なんか書いていこうぜー .com

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 するような仕組み…はソースみた感じなかった気がするけど、実は公式的な方法があったりする？