Help us understand the problem. What is going on with this article?

Vuetify使おうと思ってwebpack3からwebpack4への移行した時のメモ

概要

タイトル的なことをやったらハマったけど最終的に出来たっぽいのでまとめてみた。

経緯

Vuetifyのクイックスタートガイドに以下のような記述があり、自分のvue init webpackで作成したプロジェクトを確認したらwebpack3系で作られていた。

ツリーシェーキングに vuetify-loader を使用する場合は、Webpackのバージョン >=4であることを確認してください。

バージョン色々

  • vue: 2.5.22 -> 2.6.11
  • vue-cli: 3.3.0
  • webpack: 3.12.0 -> 4.41.6

移行手順

  • 依存関係の更新
  • ソースコードの編集
    • 上記のリンクにも記載がありましたが、より詳細がわかりやすかったのでこちらを参考にさせて頂いた。
  • 個別にやったこと
    • 上記を実施した際に、なぜかwebpack-dev-serverのバージョンだけ上がってなかったので、とりあえずnpm isntall --save-dev webpack@latestした。

ハマったとこ

上記の移行手順をやり切って、npm run buildは無事成功。
お次はnpm run devでローカル動作確認を、と思ったらdevサーバは立つもブラウザに以下のエラーが出て画面は描画されず。。。
image.png
とりあえずググるとこのような記事が。なるほど、そんなんもうわからん…

解決

ひたすらググり続けて同事象のissueに以下のコメントを発見。

use webpack-dev-server@3.5.1 instead of 3.9.0 solved the problem

ほう?そういえばさっきwebpack-dev-serverを適当に最新化したぞ…

package.json
    "webpack-dev-server": "^3.10.3"

やっぱり。
npm isntall --save-dev webpack-dev-server@3.5.1してみよう。

package.json
    "webpack-dev-server": "^3.5.1"

npm run dev実行
image.png
おー、できた!(画面も描画された)

そんなわけでひとまずwebpack3 -> webpack4の移行は完了。Vuetifyの導入に戻ります。

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした