Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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を使うにはVueLoaderPluginwebpack.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()]
}

参考

https://github.com/symfony/webpack-encore/issues/311

tkt989
AndroidやiOSでアプリを作っています 仕事は加えてWeb系もしてます
http://profile.tkt989.info
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away