vue-loader v15でエラーが出てビルドできないときの解決法

vue-loaderを使うため以下のようなwebpack.config.jsを書きました。

const path = require('path')

module.exports = {
  mode: 'production',

  entry: './src/main.js',

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

しかし、これでビルドしてみると。。。

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のv15は以前のバージョンと比べるとたくさんの変更点があるとのこと。
そのうちの一つとして、vue-loaderを使うにはVueLoaderPluginをwebpack.config.jsに追加する必要があるようです。

それで以下のように修正したら無事にビルドできました😆

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'production',

  entry: './src/main.js',

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

参考