webpack4.0中app.vue使用报错*

webpack4.0中app.vue使用报错,提示 VueLoaderPlugin出了问题，请问各位大佬有碰到过这个问题吗，我是在学vue.js实战这本书中遇到的，可能这本书写的时间有点儿久了，很多内容更新过了，坑很多，感谢解答，谢谢

报错截图

这是npm报错代码

ERROR in ./app.vue
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.
@ ./main.js 2:0-28 6:13-16

ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&lang=css&scoped=true& 18:3
Module parse failed: Unexpected token (18:3)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |
  |

div{
|
|
@ ./app.vue 4:0-87
@ ./main.js

ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true& 2:0
Module parse failed: Unexpected token (2:0)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |

| hello { {name}}
|
@ ./app.vue 1:0-94 11:2-8 12:2-17
@ ./main.js
i ｢wdm｣: Failed to compile.

main.js
import Vue from ‘vue’;
import App from ‘./app.vue’;

new Vue({
el:’#app’,
render : h => h(App)
});

webpack.config.js

var path = require(‘path’);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

var config = {
entry : {
main : ‘./main’
},
output : {
path : path.join(__dirname, ‘./dist’),
publicPath : ‘/dist/’,
filename : ‘main.js’
},
module: {
rules: [
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 193: … } } }̲, { test…/,
loader : ‘babel-loader’,
exclude : /node_modules/
},
{
test : /.css$/,
use : ExtractTextPlugin.extract({
use : ‘css-loader’,
fallback : ‘style-loader’
})
}
]
},
plugins : [
//重命名提取后的css文件
new ExtractTextPlugin(“main.css”)
]
};

module.exports = config;

app.vue

hello { {name}}