webpack実行時にvue-loaderでエラー

環境再構築するたびに手順が変わるのってどうなの？

---

エラー詳細

---

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
というエラーメッセージが出る。
vue-loaderの15からやり方が変わったとのこと。

http://top-men.hatenablog.com/entry/2018/05/07/000934
https://github.com/symfony/webpack-encore/issues/311
https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required

---

対処法

---

webpack.config.js

var path = require('path')
var webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
   //
  },
  output: {
   // 
  },
  module: {
    // 省略「
  },
  devtool: 'source-map',
  
  // 以下を追加
  plugins: [
    new VueLoaderPlugin()
  ],

}

const { VueLoaderPlugin } = require('vue-loader')

と

plugins: [
    new VueLoaderPlugin()
]

を追加すれば動作するようになる。

package.json

package.jsonのdevDependenciesは以下

  "devDependencies": {
    "css-loader": "^1.0.0",
    "thread-loader": "^1.2.0",
    "ts-loader": "^4.4.2",
    "tslint": "^5.11.0",
    "tslint-loader": "^3.6.0",
    "typescript": "^3.0.1",
    "vue-loader": "^15.2.6",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }

ビルド自体は通ったが、モジュールに警告が出ている。ちょっと気持ち悪い。

Module Warning (from ./node_modules/tslint-loader/index.js):

https://github.com/wbuchwalter/tslint-loader/issues/105
.sfcを処理するためにカスタムパーサが必要とか何とか。
だがどうしたらいいのか結局わからなかった...
動作に影響はないので保留で。