vue.js - 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 包文件

标签： vue.jswebpackwebpack-dev-serverwebpack-4