Webpackerのconfigについてのメモ
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で実現できるのはいいことだと思うので試しに書き換えて動かせたのは良かった。
