vue3+webpack构建库打包报错Module parse failed: Unexpected token (2:2)File was processed with these loaders

背景:
之前使用vue2+webpack开发了一个npm库，现在想升级为vue3版本（纯手工）
因为没有使用脚手架，得自己写webpack的配置.
vue2升级到vue3,vue-loader也得升级到17.0.0以上。之前VueLoaderPlugin的这个文件就不存在了，我就直接注释了这个plugin（怪我webpack还是不够熟悉）

问题：
然后执行打包就一直报错，下面是一部分
Module parse failed: Unexpected token (2:2)File was processed with these loaders:*./node modules/vue-loader/dist/index.jsYou may need an additional loader to handle the result of these loaders.
<el-menu

开始一直在通过上面的部分找问题：以为是缺少了什么loader，查询了半天还是没解决

最后看到重点：vue-loader was used without the corresponding plugin. Make sure to include Vueloaderplugin in your…
没有使用VueLoaderPlugin

解决：
在plugin中加入VueLoaderPlugin


webpack配置：

const path = require('path')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { resolve } = require('path')

module.exports = {
  // 模式
  mode: 'production',
  // 入口
  entry: {
    app: ['./src/index.js'],
    util: ['./src/util']
  },
  // 输出
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/lib/',
    // 输出的文件名
    filename: '[name].js',
    // 初始的chunk文件名称
    chunkFilename: 'js/[id].js',
    //  library 暴露为 AMD 模块。 在 AMD 或 CommonJS 的 require 之后可访问（libraryTarget:'umd'）
    libraryTarget: 'umd',
    // 入口的默认导出将分配给 library target：
    // if your entry has a default export of `MyDefaultModule`
    // var MyDefaultModule = _entry_return_.default;
    // libraryExport: 'default',
    // 会把 AMD 模块命名为 UMD 构建
    umdNamedDefine: true,
    // 为了使 UMD 构建在浏览器和 Node.js 上均可用，应将 output.globalObject 选项设置为 'this'。对于类似 web 的目标，默认为 self。
    globalObject: 'typeof self !== \'undefined\' ? self : this'
  },
  // 解析
  resolve: {
    // 能够使用户在引入模块时不带扩展.尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
    extensions: ['.js', '.vue', '.json']
    // 创建 import 或 require 的别名，来确保模块引入变得更简单。

  },

  // 优化
  optimization: {
    // 允许你通过提供一个或多个定制过的 TerserPlugin 实例， 覆盖默认压缩工具(minimizer)
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false
          }
        }
      })
    ]
  },
  // 性能
  performance: {
    // 不展示警告或错误提示。
    // 官网推荐使用error,有助于防止把体积大的bundle部署到生产环境,从而影响网页的性能
    // 很奇怪这里要把它关闭
    hints: false
  },
  // stats对象
  stats: {
    // 告知 stats 是否添加关于子模块的信息。
    children: false
  },
  // 模块
  module: {
    // 使用babel-loader和vue-loader
    rules: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // compilerOptions: {
          //   preserveWhitespace: false
          // }
        }
      },
    
      // 由于在组件中写了>>>这种形式的深度选择器，这种方式在sass中不支持，固这里不能和sass合并，可以将深度选择器改成:deep()形式
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
      { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: [{ loader: 'url-loader', options: { esModule: false } }]
      },
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: [{ loader: 'url-loader', options: { esModule: false } }] }
    ]
  },
  // 插件
  plugins: [
    new ProgressBarPlugin(),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/index.css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    })
  ]
}