已经配置好了loader，为什么报错说我没有配置

Question

webpack.config.js文件：const path = require('path')const VueLoaderPlugin = require('vue-loader/lib/plugin')// const VueLoaderPlugin = require('vue-loader')module.exports = {    entry: path.join(__dirname, 'src/index.js'),    output: {        filename: 'bundle.js',        path: path.join(__dirname, 'dist')    },    module: {        rules: [            {                test: /\.vue$/,                use: 'vue-loader'            },            {                test: /\.css$/,                use: 'css-loader'            }        ]    },    plugins: [        new VueLoaderPlugin()    ]}package.json文件："scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack --mode development"// 原本的webpack --config webpack.config.js会报错  },  "author": "",  "license": "ISC",  "dependencies": {    "css-loader": "^1.0.0",    "vue": "^2.5.17",    "vue-loader": "^15.2.7",    "vue-template-compiler": "^2.5.17",    "webpack": "^4.16.5"  },  "devDependencies": {    "webpack-cli": "^3.1.0"  }报错信息：ERROR in ./src/app.vue 1:0Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type.> <template>|     <div id="test">{{text}}</div>| </template> @ ./src/index.js 2:0-27 6:21-24npm ERR! code ELIFECYCLEnpm ERR! errno 2npm ERR! vue-todo@1.0.0 build: `webpack --mode development`npm ERR! Exit status 2npm ERR!