2019-04-21

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 の隠された設定みたいなものに依存してたら謎が深まるばかり、せめて前提はしっかり明記してほしいです。

参考

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm