已经配置好了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:0
Module 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-24
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vue-todo@1.0.0 build: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!