More than 5 years have passed since last update.

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

Last updated at 2020-02-16Posted at 2020-02-16

概要

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

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

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

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

上記の移行手順をやり切って、npm run buildは無事成功。
お次はnpm run devでローカル動作確認を、と思ったらdevサーバは立つもブラウザに以下のエラーが出て画面は描画されず。。。

とりあえずググるとこのような記事が。なるほど、そんなんもうわからん…

ひたすらググり続けて同事象の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.５.１"

npm run dev実行

おー、できた！（画面も描画された）

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