最近自分の個人サービスのRailsアプリケーションをWebpaker3系(3.5.5)から4系(4.0.7)にアップグレードしたのですが、割とハマったので手順をメモしておく✍
ちなみにVue.jsを使っている場合の手順になるので、ご注意ください⚠
とりあえず手順だけ
package.json
のwebpacker
のバージョンを上げてyarn installbundle exec rails webpacker:install:vue
を実行して関連ファイルを差し替える.babelrc
は不要となったようなので削除するyarn add postcss-loader postcss-cssnext
でCSS系のローダーをinstallする。でCSS系のローダーをinstallする。bin/webpack
で動作を確認して成功🎉
ちょっと各項目を詳しく
package.json
のwebpacker
のバージョンを上げてyarn install
私の環境では下記のようにpackage.json
の値を変更しました。
- "@rails/webpacker": "3.5", + "@rails/webpacker": "^4.0.7",
bundle exec rails webpacker:install:vue
を実行して関連ファイルを差し替える
とりあえずこの辺のIssueとかを参考にwebpackerを再インストールして関連ファイルを置き換える方針としました。
ちなみにVueを使ってる場合はbundle exec rails webpacker:install
だとbin/webpack
が落ちるので、bundle exec rails webpacker:install:vue
とvueのオプションが付いていることを確認して実行してください👍
.babelrc
は不要となったようなので削除する
.babelrc should be replaced with babel.config.js and .postcssrc.yml should be replaced with postcss.config.js (#1822). If you never changed these files from their defaults, the versions of babel.config.js and postcss.config.js in the webpacker repository should be usable. https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md
公式のアップグレードガイドを読むと.babelrc
はbabel.config.js
、.postcssrc.yml
、postcss.config.js
に置き換わったようなので削除します。
yarn add postcss-loader postcss-cssnext
でCSS系のローダーをinstallする。
下記のようなloaderが無いといったエラーが出て怒られ、postcss-loaderをyarn installしました。
ERROR in ./app/javascript/components/SelectedFeedCollection.vue 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
bin/webpack
で動作を確認して成功🎉
成功🎉
$ bin/webpack Hash: b6ce58b9b9269885415e Version: webpack 4.41.1 Time: 6113ms Built at: 2019-10-13 18:52:52 Asset Size Chunks Chunk Names js/application-b4676d1cafca124dcbc4.js 5.52 KiB application [emitted] [immutable] application js/application-b4676d1cafca124dcbc4.js.map 4.75 KiB application [emitted] [dev] application js/boards/new-116f6d95ccf73c0bf595.js 2.71 MiB boards/new [emitted] [immutable] boards/new js/boards/new-116f6d95ccf73c0bf595.js.map 2.66 MiB boards/new [emitted] [dev] boards/new js/boards/show-3c0839ad6d8bf5cc5a67.js 1010 KiB boards/show [emitted] [immutable] boards/show js/boards/show-3c0839ad6d8bf5cc5a67.js.map 1.06 MiB boards/show [emitted] [dev] boards/show js/feeds/index-a04d21250cd286bebdc9.js 1.19 MiB feeds/index [emitted] [immutable] feeds/index js/feeds/index-a04d21250cd286bebdc9.js.map 1.27 MiB feeds/index [emitted] [dev] feeds/index js/feeds/new_edit-19109b59a4305c3c86f0.js 341 KiB feeds/new_edit [emitted] [immutable] feeds/new_edit js/feeds/new_edit-19109b59a4305c3c86f0.js.map 414 KiB feeds/new_edit [emitted] [dev] feeds/new_edit js/feeds/show-b54f5a1e4c65ecd8b498.js 1010 KiB feeds/show [emitted] [immutable] feeds/show js/feeds/show-b54f5a1e4c65ecd8b498.js.map 1.06 MiB feeds/show [emitted] [dev] feeds/show js/hello_vue-224fd327e61129b597a1.js 272 KiB hello_vue [emitted] [immutable] hello_vue js/hello_vue-224fd327e61129b597a1.js.map 321 KiB hello_vue [emitted] [dev] hello_vue js/store-746389ea103ab4b9a065.js 4.05 KiB store [emitted] [immutable] store js/store-746389ea103ab4b9a065.js.map 3.65 KiB store [emitted] [dev] store manifest.json 2.63 KiB [emitted] Entrypoint application = js/application-b4676d1cafca124dcbc4.js js/application-b4676d1cafca124dcbc4.js.map Entrypoint boards/new = js/boards/new-116f6d95ccf73c0bf595.js js/boards/new-116f6d95ccf73c0bf595.js.map Entrypoint boards/show = js/boards/show-3c0839ad6d8bf5cc5a67.js js/boards/show-3c0839ad6d8bf5cc5a67.js.map Entrypoint feeds/index = js/feeds/index-a04d21250cd286bebdc9.js js/feeds/index-a04d21250cd286bebdc9.js.map Entrypoint feeds/new_edit = js/feeds/new_edit-19109b59a4305c3c86f0.js js/feeds/new_edit-19109b59a4305c3c86f0.js.map Entrypoint feeds/show = js/feeds/show-b54f5a1e4c65ecd8b498.js js/feeds/show-b54f5a1e4c65ecd8b498.js.map Entrypoint hello_vue = js/hello_vue-224fd327e61129b597a1.js js/hello_vue-224fd327e61129b597a1.js.map Entrypoint store = js/store-746389ea103ab4b9a065.js js/store-746389ea103ab4b9a065.js.map [./app/javascript/app.vue] 1.18 KiB {hello_vue} [built] [./app/javascript/app.vue?vue&type=script&lang=js&] 364 bytes {hello_vue} [built] [./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] 760 bytes {hello_vue} [built] [./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true&] 213 bytes {hello_vue} [built] [./app/javascript/packs/application.js] 502 bytes {application} [built] [./app/javascript/packs/boards/new.js] 677 bytes {boards/new} [built] [./app/javascript/packs/boards/show.js] 211 bytes {boards/show} [built] [./app/javascript/packs/feeds/index.js] 280 bytes {feeds/index} [built] [./app/javascript/packs/feeds/new_edit.js] 166 bytes {feeds/new_edit} [built] [./app/javascript/packs/feeds/show.js] 210 bytes {feeds/show} [built] [./app/javascript/packs/hello_vue.js] 1.89 KiB {hello_vue} [built] [./app/javascript/packs/store.js] 56 bytes {store} {boards/new} {feeds/index} [built] [./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=script&lang=js&] ./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 115 bytes {hello_vue} [built] [./node_modules/style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] ./node_modules/style-loader??ref--3-0!./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 1.8 KiB {hello_vue} [built] [./node_modules/webpack/buildin/glo
おわりに
前回いろいろやってハマった結果断念したのですが、今回再チャレンジしてwebpacker 4に上げました!
まぁ上がったのはいいのですが、webpacker 4で何が出来るようになったのか、また今回発生したエラーまわりも、ググってやってみたら動いて的なあれが多かったので、フロントまわりキャッチアップしないとですね😅