problem description
webpack compiles vue file and keeps reporting errors
ERROR in. / src/app.vue 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
|
|
< template >
| < div class= "example" > {{msg}} < / div >
| < / template >
@. / src/index.js 4:0-28 8:18-21
the environmental background of the problems and what methods you have tried
I read a lot of answers on the Internet, but I didn"t solve them
related codes
/ / Please paste the code text below (do not replace the code with pictures)
const path = require ("path");
const VueLoaderPlugin = require (" vue-loader/lib/plugin");
module.exprots = {
mode: "development",
entry: path.join(__dirname, "src/index.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
},
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
plugins: [
new VueLoaderPlugin()
]}
related codes
app.vue
< template >
< div class= "example" > {{msg}} < / div >
< / template >
< script >
export default {
data () {
return {
msg: "Hello world!"
}}
}
< / script >
< style >
.example {
color: red;
}
< / style >
related codes
package.json file
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode=development",
"test": "echo \"Error: no test specified\" && exit 1"},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.22"},
"devDependencies": {
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"node-pre-gyp": "^0.12.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"}
}
related codes
index.js
import Vue from "vue";
import App from ". / app.vue";
new Vue ({
)el: "-sharproot",
components: { App },
template: "<App/>"});