Webpacker の config についてのメモです。

Webpacker の config ファイルはconfig/webpackにまとめられている。

$ tree config/webpack
config/webpack
├── configuration.js
├── development.js
├── development.server.js
├── development.server.yml
├── loaders
│   ├── assets.js
│   ├── babel.js
│   ├── coffee.js
│   ├── erb.js
│   ├── react.js
│   └── sass.js
├── paths.yml
├── production.js
├── shared.js
└── test.js

1 directory, 14 files

（bin/rails webpacker:install:react したのでreact.jsがある）

dev 環境や production 環境で設定を分けるためにファイルを分割しており、共通設定はshared.jsに書かれている。

shared.jsではconfiguration.jsを読み込む。configuration.jsではpaths.ymlを元にエントリとなるフォルダや出力するフォルダの情報を読み込んでいる。

結果的にshared.jsはconfiguration.jsの paths 情報を元に、エントリとなるフォルダ以下のファイルを全て entry として読み込み出力する。

自分はエントリが複数あることに懐疑的なので、書き換えた。

Webpacker のディレクトリ構成を Rails から切り離す形に変える方法 - Qiita

複数エントリのために複数ファイルが吐き出されたり、SCSS の変数や mixins が期待通り動かなかったりした（というかエラーになったりする）ので少し困った。

例えば、CSS in JS 的な構成ではなく、普通に CSS を切り分けて開発しているとする。するとまぁ SCSS はこんな感じの構成になって、それをまとめるファイルはこんな感じ（以下）になると思う。

で、これを Webpacker の標準の設定で動かそうとすると、それぞれのファイルを見に行ってしまうので SCSS の変数等が解決できず、エラーが出る。一応 shakacode/sass-resources-loader とかを使えば解決できるけど、明らかにいらないファイルとかを生成してしまっていたので気持ち悪かった。

多分、Webpacker の思想？的なものとは少しはずれてるんだろうけど、こういう開発ニーズもあると思うし、それを Webpacker で実現できるのはいいことだと思うので試しに書き換えて動かせたのは良かった。