在本地主机上设置的 Webpack devServer 打开错误的本地 URL答案

【问题标题】：Webpack devServer set up on localhost opening the wrong local URL在本地主机上设置的 Webpack devServer 打开错误的本地 URL
【发布时间】：2023-02-04 04:46:03
【问题描述】：

我正在开发一个将使用 React App 的 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,
      },
    },
  },
};

这是我的 package.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');
  }
}

【问题讨论】：

标签： wordpress webpack webpack-dev-server

【解决方案1】：

如果 webpack-dev-server 打开了错误的 URL，您可以通过在 webpack.config.js 文件中设置 public 选项来指定正确的 URL：

module.exports = {

// ... devServer: { public: 'http://localhost:3000', // Specify the correct URL // ... } };

或者，您可以使用 --host 选项启动 webpack-dev-server 以指定要绑定到的主机名：

webpack-dev-server --host 0.0.0.0

这应该可以解决 webpack-dev-server 打开错误 URL 的问题。

【讨论】：