いてづきブログ

情シスでやってみたことの備忘録

webpackerのアップデートをした

大変だった。

その一部始終と分かったこと思ったことを残しておく。

 

先に書いておくとアップデートできたからと言ってwebpacker理解できたわけではない。

ただwebpackerを扱うときどのあたりを触ったりどのあたりの記述が関係してるのかのあたりはつけられるようになったし、開発サーバー立ち上げるときに流れるログにもちゃんと意味があってそれがヒントになることがわかるようにはなった。

 

アップデートの手順

  1. おもむろにwebpackerをアップデート
  2. rails webpacker:init
  3. 必要なnpm packageをインストール
  4. 初期化前との差分があれば導入する
  5. 動作チェック

見るべき場所

おもに見るべきは webpacker.yml と config/environment.js 

environment.jsがbabel他のloaderの設定になっている。

 


詳しいことは公式に書いてある。
主にはchunkのやり方が変わったこととerbに埋め込むタグ(javascript_packs_with_chunks_tag)を使うこと、画像などはmediaパスになったこと、webpacker.ymlに  extract_css: true を書くこと、が主な対応だった。

 

webpacker立ち上げるとログにjsやcssのパスが大量に表示されるところがあるけどあれが javascript_packs_with_chunks_tag で読ませるべきパスと実際のファイルの対応になっている。
あれがおかしければ読み込めないし、欲しい形のパスになっていないならenvironment.js内のloaderの設定を見直す、という感じで対応した。

 

 

それにしても、webpackerのググラビリティ低すぎ(勝手にwebpackとして検索される)

webpack自体もだいぶ辛いけどwebpackerはwrapされてるのもあって更に辛い。
世に脱webpacker記事が沢山あるのもうなずける。

 

そんな感じで四苦八苦しつつもなんとかアップデート自体は完了した(3系→5系)
…と思ったらそのプロダクトがサ終することが決まった。

 

この展開、前にも見た気が…。呪われているんだろうか*1

 

 

速習 webpack 第2版 速習シリーズ

速習 webpack 第2版 速習シリーズ

 

 

*1:一応別のプロダクトにそのまま応用できるわけだから完全に無駄になったわけではない