webpack-dev-server 未运行（ECONNREFUSED）

Question

I'm having some troubles with webpack, after some commits I tried to run the server but nothing appear at http://localhost:3000 . The config seems OK and this already worked meanwhile. Any suggestions are welcome. At webpack.config, I tried to use 127.0.0.1 instead localhost keyword and didn't worked. Also, changing http to https and didn't change to better.

The console output:

> 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

The 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
      },
    ],
  },
};

The 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

If you setup a proxy in the config, you (the dev) are expected to run a server where things are being proxied to eg at http://localhost:3000. Webpack devserver does not create the proxied server for you. The proxy setting is commonly used to proxy api calls eg

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

So if you do not have a reason to proxy, eg an api, remove the proxy settings and use the devserver port eg localhost:8085.

More info in thedocs .

Also the contentBase should be an absolute path.