我正在开发一个使用React应用程序的WordPress插件。我正在尝试让devServer使用实时重载。我需要它在浏览器中打开http：//localhost/shuffledink/builder。我当前的设置在运行npm start时总是打开http：//localhost：8085并显示assets/js中的所有文件。我在webpack配置中注解掉了端口，因为我总是收到错误：

code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '127.0.0.1',
  port: 80

我在端口80上使用XAMPP apache本地服务器。
我在终端也收到了这条消息：

[webpack-dev-server] Content not from webpack is served from 'C:\xampp\htdocs\shuffledink\wp-content\plugins\shuffled-ink-builder\assets\js' directory

哪个是我的包文件的正确路径，所以我认为这部分是可以的？
以下是我的当前配置：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "/assets/js"),
    filename: "[name].bundle.js",
    publicPath: "/assets/js/",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devServer: {
    host: "localhost",
    //port: 80,
    static: path.join(__dirname, "/assets/js"),
    liveReload: true,
    open: true,
    proxy: {
      "/shuffledink/builder/": {
        target: "http://localhost",
        secure: false,
      },
    },
  },
};

这是我的包裹json：

{
  "name": "Shuffled Ink",
  "version": "1.0",
  "private": true,
  "description": "Shuffled Ink Card Bulder",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@eastdesire/jscolor": "^2.5.1",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.1",
    "@types/jest": "^29.2.4",
    "@types/node": "^18.11.17",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "fabric": "^5.2.4",
    "fabric-history": "^1.7.0",
    "node-sass": "^7.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "selectable.js": "^0.18.0",
    "sortablejs": "^1.15.0",
    "typescript": "^4.9.4"
  }
}

我包括我的捆绑JS文件在我的WordPress插件这样：

function builder_scripts() {
 
  if(get_query_var('custom_page')) {
    wp_register_script('shuffled_ink_builder_scripts', plugins_url('assets/js/main.bundle.js', __FILE__), array(),null, true);
     
    wp_enqueue_script('shuffled_ink_builder_scripts');
  }
}