VueLoaderPluginのせいでエラーが起きていると言われたら確認したいこと

概要

土曜日なので、vueはじめました。
はじめてのwebpackに戸惑いながらもSPAに挑戦しています。

しかし、さっそくのビルドエラーに遭遇してしまいました。
なにやらvue-loaderが悪さをしているようです。

ERROR in ./src/pages/About.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.

今回はわたしが解決した方法をご紹介します。

原因

https://vue-loader.vuejs.org/migrating.html
どうやらvue-loaderには最近著しい変更があり、v15からプラグインとして読み込んであげてねってことになったようです。

ちなみに、自分の環境だとバージョンは"vue-loader": "^15.6.2",。
まさにこれでした。

解決方法

https://vue-loader.vuejs.org/migrating.html
以下のようにconstで定義して、module.exportsのなかのpluginsにぽこっとnewしてあげればいいようです。

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

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

私はこれで無事に解決できました。
もし、同じエラーが出た場合はお試しくださいね！

おまけ

次はcss-loaderを解決しなくては..汗
今までgulp一本な人生だったので、webpackは不思議な感覚です。(かといって、gulpをそんなに高い頻度で使っているわけでもないw)