为什么找到“ vue-loader不匹配使用？”

Question

尝试使用配置文件设置webpack-dev-server，但我不断收到以下错误：

错误：[VueLoaderPlugin错误]没有与vue-loader匹配的用途找到了。确保与.vue文件匹配的规则在其中包括vue-loader它的使用。

const webpack = require('webpack');
const merge = require('webpack-merge');
const utils = require('./utils');
const {  VueLoaderPlugin } = require('vue-loader');
const baseConfig = require('./webpack.base.config');


module.exports = merge(baseConfig, {
  mode: 'development',
    entry:  {
    app: utils.resolve('/src/entry.js')
  },
  devtool: 'inline-source-map',
  devServer: {
    index: 'index.html',
    hot: true,
    port: 8080,
    contentBase: utils.resolve('/dist'), // this where static files come from
  },
    resolve: {
         extensions: ['.js', '.vue', '.json'],
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all",
                },
            },
        },
    },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
        }
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ]
});

我显然正在对.vue文件并使用vue-loader进行测试。那么VueLoaderPlugin / Webpack在哭什么呢？

Answer 1

确定应该是：

rules: [
  {
    test: /\.vue$/,
    use: [{
      loader: 'vue-loader',
    }] // or ['vue-loader']
  }
]

根据docs use应该是一个数组。