Madogiwa Blog

主に技術系の学習メモに使っていきます。

webpacker3系からwebpacker4系へのアップグレードでハマったので手順とかMemo✍

最近自分の個人サービスのRailsアプリケーションをWebpaker3系(3.5.5)から4系(4.0.7)にアップグレードしたのですが、割とハマったので手順をメモしておく✍

ちなみにVue.jsを使っている場合の手順になるので、ご注意ください⚠

とりあえず手順だけ

  1. package.jsonwebpackerのバージョンを上げてyarn install
  2. bundle exec rails webpacker:install:vueを実行して関連ファイルを差し替える
  3. .babelrcは不要となったようなので削除する
  4. yarn add postcss-loader postcss-cssnextCSS系のローダーをinstallする。でCSS系のローダーをinstallする。
  5. bin/webpackで動作を確認して成功🎉

ちょっと各項目を詳しく

package.jsonwebpackerのバージョンを上げてyarn install

私の環境では下記のようにpackage.jsonの値を変更しました。

-    "@rails/webpacker": "3.5",
+    "@rails/webpacker": "^4.0.7",

bundle exec rails webpacker:install:vueを実行して関連ファイルを差し替える

とりあえずこの辺のIssueとかを参考にwebpackerを再インストールして関連ファイルを置き換える方針としました。

github.com

ちなみに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

公式のアップグレードガイドを読むと.babelrcbabel.config.js.postcssrc.ymlpostcss.config.jsに置き換わったようなので削除します。

yarn add postcss-loader postcss-cssnextCSS系のローダーを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で何が出来るようになったのか、また今回発生したエラーまわりも、ググってやってみたら動いて的なあれが多かったので、フロントまわりキャッチアップしないとですね😅

参考

github.com