【Webpack】Webackにする際にvue-loaderでエラーがでる【vue-loader】

2020-05-20 (Wed)

先日chromeの拡張機能を作ろうとしてたらWebpackのbuildに失敗したので備忘録を兼ねて……

エラーと原因

エラーは以下の通りでした。

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

どうやらvue-loaderを使用する場合はプラグインとして呼び出せってことらしいです。

ちなみにこのへんにちゃんと書いてありました(´･ω･`)

解決

公式のとおりに以下のように設定して解決です

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ]
}

おまけ

自分は新規でなにか作るときって、たいてい過去に作ったものをベースにいらないものを削除して、モジュール等を最新に更新して作り始めるので、こういうバージョンアップの影響でエラーに出くわすことが多いのです(´･ω･`)

まぁ手っ取り早く作れるので、今後もこの方法で新しいのは作っていくと思いますけどね。