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

?

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

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

?

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

と

?

1 2 3

plugins: [     new VueLoaderPlugin() ]

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

package.json

package.jsonのdevDependenciesは以下

?

1 2 3 4 5 6 7 8 9 10 11 12

"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を処理するためにカスタムパーサが必要とか何とか。
だがどうしたらいいのか結局わからなかった...
動作に影響はないので保留で。