SymfonyのWebpack Encoreでvuejsを使う

ツイートブックマーク

Symfony使っているので、最近はフロントエンド関連なものはwebpack-encoreを使うようにしている。
んで、webpack-encoreでvuejsを使いたいたかったのでドキュメント通りに対応してみた。 Enabling Vue.js (vue-loader) (Symfony Docs)

しかし、これだとエラーが出てしまう。

1

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

ぐぐってみるとこんなissueが発見された。
enableVueLoader does not include VueLoaderPlugin? · Issue #311 · symfony/webpack-encore · GitHub

vue-loaderのv15は今のところwebpack-encoreのenableVueLoaderだけではうまくいかないようだ・・・。
v14を使え的なコメントもちらほらありましたが、v15を使いたい(なんとなくだけど。）

まあエラーメッセージに「Make sure to include VueLoaderPlugin in your webpack config」って書いてあるし、pluginにVueLoaderPluginを設定すればいいだけぽいので雑にwebpack.config.jsを書き換えてみた。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// webpack.config.js

var Encore = require('@symfony/webpack-encore')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('js/app','./assets/js/app')
  .autoProvidejQuery()
  .enableVersioning(Encore.isProduction())
  .enableSourceMaps(!Encore.isProduction())
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSassLoader()
  .enableVueLoader()

let config = Encore.getWebpackConfig();
config.plugins.push(*new*VueLoaderPlugin);

module.exports = config;

VueLoaderPluginをrequireして、Encoreで生成されたwebpackのconfigのpluginsに入れてあげた。
とりあえずこれでうまく動いているぽいので、しばらく様子を見てみようと思う。