Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@kazzool

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

More than 1 year has passed since last update.

概要

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

経緯

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の導入に戻ります。

参考文献

1
Help us understand the problem. What is going on with this article?
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
kazzool
SIerで4 年くらい職業エンジニア→2019年あたりから趣味エンジニアも始めて絶賛独学中。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?