vue.js

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を使うには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