webpack-encoreでvuejsを使う

webpack-encoreでvuejsを使う

May 23, 2018,
tags: symfony vuejs webpack


このエントリーをはてなブックマークに追加

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

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

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を書き換えてみた。

// 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に入れてあげた。
とりあえずこれでうまく動いているぽいので、しばらく様子を見てみようと思う。

comments powered by Disqus