Webpack运行正常，但Webpack开发服务器未运行应用程序出现控制台错误

Question

我是Vuejs Webpack配置的新手。我正在尝试使用开发服务器运行vuejs应用程序，但无法运行。 Webpack命令运行良好，并且能够成功构建应用程序，并且运行良好，但是当我尝试使用开发服务器运行应用程序时，它会在浏览器本身上打开url，但会抛出控制台错误，无法跟踪正在发生的事情。

const HtmlWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

const path = require("path");
module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: `js/[name]_[hash]_bundle.js`,
    chunkFilename: `js/[name]_[chunkhash]_chunk.js`,
  },
  devServer: {
    port: 4300,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
      {
        test: /\.(css|scss)$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    splitChunks: { name: "vendor", chunks: "all" },
  },
  resolve: {},
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./index.html",
      filename: "./index.html",
    }),
  ],
  devtool: "source-map",
};

这是我在运行webpack-dev-server命令时遇到的错误，

您可以在此处看到它在index.html中正确加载js捆绑文件的过程