WebpackerとWebpackManifest gemはwebpack-assets-manifest npmのentrypoints形式を前提にしている

まとめ

webpack-assets-manifest - npm

これを正しく使え。

頼むからそういう大事なことは大きく何度でも書いといてくれ。

確認したバージョン

  • webpack npm 4.28.4
  • webpack-assets-manifest npm 3.1.1
  • rails gem 5.2.3
  • webpack-manifest gem 0.2.4

で意図通りに動作することが確認できました。

manifestの形式が違う

どういうことかというと、よく見る manifest.json の

{
   "name": "path",
   "name": "path",
   ..
}

name と path を紐づけただけの形式ではなく、entrypoints の中にツリー構造で種類別に書き出してくれるものがあるのだ。

{
  "entrypoints": {
    "name": {
      "js": [
        "path",
        "path"
      ],
      "js.map": [
        ..
      ],
      "css": [
        ..
      ],
      ..
    }
  },
  "name": "path",
  "name": "path",
  ..
}

この "js" の中にはもともとのアプリケーションの entry point だけでなく、splitChunk で書き出されたファイルも含まれているので、WebpackManifest gem で言う javascript_bundles_with_chunks_tag, Webpacker で言う javascript_packs_with_chunks_tag は依存している chunk も自動的に <script> で読み込めるようになるという寸法らしい。

もうちょっと設定が必要

具体的には plugin を利用するところで

new WebpackAssetsManifest({
  entrypoints: true,
  publicPath:  true
})

としておくと entrypoints を有効にしつつ、かつ publicPath の設定を引き継ぐことができるので、splitChunk の成果を自在に利用することができる。

逆に言うと他の似たような manifest 系の npm ではなく、間違いなくリンク先の npm を利用して間違いなく上の設定を追加しておかないとダメ。

完全に過渡期の、すぐに使えなくなるノウハウのにおいがするけど、Webpack さんはメジャーバージョン 4 になってまでなんでこんな感じなんすかね…。いい加減、Web は Webpack だけで完結しないんだから他のツールとのインターフェイスをどうするかが重要という基本的なことに気づいてほしい。書き方いじったりする前に manifest の API 固めてくれ。

あと WebpackManifest gem も Webpacker じゃないんだから Webpack 側の設定に強い前提を黙って入れたらダメだと思う。せっかく脱 Webpacker しても Webpacker の隠された設定みたいなものに依存してたら謎が深まるばかり、せめて前提はしっかり明記してほしいです。

参考

More