在vue3项目中，使用webpack打包时报错

前端vue3问题
webpack打包时报错，因为想要解决vue3的样式在各个浏览器的兼容性问题，如何查到说要用webpack来配置Autoprefixer，因此下载了webpack，试图打包实现各个浏览器的兼容，结果报错23个，总结来说就是报错这三类


ERROR in ./src/App.vue?vue&type=style&index=0&id=31668a30&lang=css 5:0
Module parse failed: Unexpected token (5:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| html,
| body,
> #app {
|   width: 100%;
|   height: 100%;
 @ ./src/App.vue 4:0-62
 @ ./src/main.js 2:0-28 9:22-25

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/dist/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./src/main.js 2:0-28 9:22-25



ERROR in ./src/views/index.vue?vue&type=script&setup=true&lang=js 7:0-54
Module not found: Error: Can't resolve '@/components/commonAside.vue' in 'D:\workFile\workProject\vueProject\succes\weak-pwd\src\views'
 @ ./src/views/index.vue 1:0-67 2:0-62 2:0-62 7:49-55
 @ ./src/router/index.js
 @ ./src/main.js 3:0-30 21:8-14

我的webpack.config.js配置文件如下：

const path = require('path');

module.exports = {
  entry: './src/main.js', // 入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录路径
    filename: 'bundle.js' // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // 匹配.vue文件
        loader: 'vue-loader' // 使用vue-loader处理.vue文件
      },
      {
        test: /\.js$/, // 匹配.js文件
        exclude: /node_modules/, // 排除node_modules目录
        loader: 'babel-loader' // 使用babel-loader处理.js文件
      },
      // 其他规则...
    ]
  },
  // 其他配置...
};

且修改了package.json中的

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
  },

改为


"scripts": {
    "serve": "vue-cli-service serve",

    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },

我用npm run serve运行的时候都没有问题，就是打包用npm run build后报错，有愿意解答的吗，非常感谢🙏