При попытке создать сборку Webpack5 для Vue3 с нуля столкнулся с тем что webpack не видит config

Пытаюсь с нуля настроить сборку webpack5 для vue3

Когда пытаюсь запустить проект появляется вот эта ошибка.

Вот мой package.json

  "name": "webpack-multi-template",
  "version": "1.2.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve",
    "d ev": "webpack",
    "build": "webpack --node-env=production",
    "clear": "rd /s /q dist"
  },
  "keywords": [
    "webpack",
    "html",
    "css",
    "javaScript"
  ],
  "author": "[email protected]",
  "license": "ISC",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "@vue/compiler-sfc": "^3.2.47",
    "babel-loader": "^9.1.2",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "filemanager-webpack-plugin": "^8.0.0",
    "group-css-media-queries-loader": "^4.3.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "image-webpack-loader": "^8.1.0",
    "mini-css-extract-plugin": "^2.7.2",
    "postcss": "^8.4.20",
    "postcss-loader": "^7.0.2",
    "postcss-preset-env": "^7.8.3",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.1",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "normalize.css": "^8.0.1",
    "vue": "^3.2.36",
    "vue-router": "^4.1.6"
  }
}

Вот webpack.config.js

const FileManagerPlugin = require('filemanager-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')

const mode = process.env.NODE_ENV || 'development';
const devMode = mode === 'development';
const target = devMode ? 'web' : 'browserslist';
const devtool = devMode ? 'source-map' : undefined;

module.exports = {
  mode,
  target,
  devtool,
  devServer: {
    port: 3000,
    open: true,
  },
  resolve: {
    // Add `.ts` as a resolvable extension.
    extensions: ['.ts', '.js']
  },
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: '[name].[contenthash:2].js',
    assetModuleFilename: 'assets/img/[name][ext]',
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'template.html'),
      // template: path.join(__dirname, 'src', 'template.pug'),
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:2].css',
    }),
    new CopyPlugin({
      patterns: [
        {
          from: "src/fonts",
          to: path.join(__dirname, 'dist', 'fonts', '[name][ext]')
        },
        {
          from: "src/static",
          to: path.join(__dirname, 'dist', 'static', '[name][ext]')
        },
      ],
    }),
    new FileManagerPlugin({
      events: {
        onStart: {
          delete: ['dist'],
        },
        // onEnd: {
        //   copy: [
        //     {
        //       source: path.join('src', 'static'),
        //       destination: 'dist/static',
        //     },
        //   ],
        // },
      }
    }),
  ],
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader',
      },
      {
        test: /\.(c|sa|sc)ss$/i,
        use: [
          devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-preset-env')],
              },
            },
          },
          'group-css-media-queries-loader',
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
      {
        test: /\.(jpe?g|png|webp|gif|svg)$/i,
        use: devMode
          ? []
          : [
            {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                },
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.65, 0.9],
                  speed: 4,
                },
                gifsicle: {
                  interlaced: false,
                },
                webp: {
                  quality: 75,
                },
              },
            },
          ],
        type: 'asset/resource',
      },
      {
        test: /\.m?js$/i,
        use: 'babel-loader',
        exclude: /(node_modules|bower_components)/  &&
        !/\.vue\.js/.test(file),

        // use: {
        //   loader: 'babel-loader',
        //   options: {
        //     presets: ['@babel/preset-env'],
        //   },
        // },
      },
      {
        test: /\.vue$/i,
        exclude: /(node_modules)/,
        use: {
          loader: "vue-loader",
        },
      }
    ],
  },
};