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}}