webpack-dev-server 未运行（ECONNREFUSED）

Question

我在使用 webpack 时遇到了一些问题，在进行了一些提交后，我尝试运行服务器，但 http://localhost:3000 上没有出现任何内容。配置似乎还可以，同时这已经奏效了。欢迎任何建议。 在 webpack.config 中，我尝试使用 127.0.0.1 而不是 localhost 关键字，但没有成功。还有，把http改成https也没有改好。

控制台输出：

> webpack-dev-server --config webpack.config.js --mode development --hot

[HPM] Proxy created: [ '/' ]  ->  http://localhost:3000
ℹ ｢wds｣: Project is running at http://localhost:8085/
ℹ ｢wds｣: webpack output is served from /build
ℹ ｢wds｣: Content not from webpack is served from /build/
ℹ ｢wds｣: 404s will fallback to /index.html
[HPM] Error occurred while trying to proxy request / from localhost:8085 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[BABEL] Note: The code generator has deoptimised the styling of /node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: Hash: 267d8ae083c789a0e40f
Version: webpack 4.44.2
Time: 12214ms
Built at: 03/27/2021 10:21:06 PM
            Asset      Size  Chunks             Chunk Names
     ./index.html   1.7 KiB          [emitted]  
          dam.ico  66.1 KiB          [emitted]  
webpack-bundle.js  3.05 MiB    main  [emitted]  main
Entrypoint main = webpack-bundle.js

webpack.config.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "webpack-bundle.js",
    publicPath: path.resolve(__dirname, "/build/"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: ["/node_modules/", "/src/styles.css"],
      },
      {
        test: /\.(css)$/,
        loaders: ["style-loader", "css-loader"],
      },
       {
        test: /\.(jpg|png)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",  // reference index.html file
      filename: "./index.html",         // the name and location of referenced file at output folder
      favicon: "public/dam.ico",
    }),
  ],
  devServer: {
    publicPath: path.resolve(__dirname, "/build/"),
    contentBase: "/build/",              // path that contain webpack-bundle
    port: 8085,                          // port where the app will be accessible
    hot: true,
    open: true,                          // open web browser after compiled
    historyApiFallback: true,
    proxy: [
      {
        context: ["/"],                  // endpoint which you want to proxy the provider
        target: "http://localhost:3000",     // your main server address - react app provider
      },
    ],
  },
};

package.json:

{
  "name": "ediawater",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@react-google-maps/api": "^2.1.1",
    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.21.1",
    "bootstrap": "4.5.3",
    "google-map-react": "^2.1.9",
    "prop-types": "^15.7.2",
    "pubsub-js": "^1.9.3",
    "react": "17.0.0",
    "react-bootstrap": "1.4.0",
    "react-dom": "17.0.0",
    "react-grid-layout": "1.2.0",
    "react-json-to-csv": "^1.0.4",
    "react-laag": "^2.0.2",
    "react-redux": "^7.2.2",
    "react-scripts": "^4.0.1",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev-start": "webpack-dev-server --config webpack.config.js --mode development --hot",
    "dev-build": "webpack --config webpack.config.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "css-loader": "^5.1.0",
    "eslint": "^7.17.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.22.0",
    "prettier": "^2.2.1",
    "reactide-config": "^1.0.2",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.7.0"
  }
}

Answer 1

如果你在配置中设置了一个代理，你（开发者）应该运行一个服务器，在这个服务器上东西被代理到，例如 http://localhost:3000。 Webpack devserver 不会为您创建代理服务器。代理设置通常用于代理 api 调用，例如

    proxy: {
      '/api': 'http://localhost:3000',
    },

因此，如果您没有代理的理由，例如 api，请删除代理设置并使用 devserver 端口，例如 localhost:8085。

更多信息请关注docs。

contentBase 也应该是绝对路径。