【webpack】vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

Error | エラー

webpack で vue-loader を使用する際に以下のエラーが出ることがある。

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

Solution | 解決方法

webpack.config.js の plugins に VueLoaderPlugin の記述を追加する必要がる。

const { VueLoaderPlugin } = require("vue-loader");

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

Supplement | 補足

vue-loader の使用方法

1. インストール

   # using npm
   npm install vue-loader --save-dev
   
   # using yarn
   yarn add vue-loader --dev
   

2. webpack.config.js への記述

   ※ entry, outputなどは適宜記述ください。　

   const { VueLoaderPlugin } = require("vue-loader");
   
   module.exports = {
     module: {
       rules: [
         {
           test: /\.vue$/,
           loader: "vue-loader"
         }
       ]
     },
     plugins: [new VueLoaderPlugin()]
   }