Configuration error in webpack-dev-server v4 2022-CodePudding

I'm studying about react with a 2020 online course where the instructor uses webpack to include images and CSS in javascript. However, the webpack appears to have undergone an update from 2020 to 2022. Going from v3 to v4 according to OFFICIAL WEBSITE.

It seems like other people had the same problem and asked the same question, I've tried using the solutions they used but I haven't had any success or progress.

My goal is to be able to configure the webpack.config.js file correctly, using the webpack-dev-server which is responsible for automatically reloading the browser when we make any changes to the JS using babel and webpack.

The configuration of my webpack.config.js file was as follows initially with the course:

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
};

Initializing webpack-dev-server with this command

npx webpack-dev-server --mode development

I have the following return:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

Which indicates that contentBase: is no longer used in version 4 of webpack-dev-server

According to the official website, the contentBase: appears to have been changed to something like:

static: {
  directory: path.resolve(__dirname, 'public'),
},

change:

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'public'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
};

Tried this modification but could not start webpack-dev-server through command in terminal

npx webpack-dev-server --mode development

However, now the error I have another:

> <i> [webpack-dev-server] Project is running at: <i>
> [webpack-dev-server] Loopback: http://localhost:8080/ <i>
> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.10:8080/
> <i> [webpack-dev-server] On Your Network (IPv6):
> http://[fe80::12bf:f2cb:19c:a79c]:8080/ <i> [webpack-dev-server]
> Content not from webpack is served from
> '/home/hebert/Documents/Bootcamp RocketSeat/frontend/public' directory
> node:internal/errors:477
>     ErrorCaptureStackTrace(err);

my package.json looks like this:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^4.11.0"
  }
}

Could you help me to configure the webpack correctly? Thanks in advance to those who read this far.

CodePudding user response：

You're right about static, but you forgot to put other important settings. I won't linger too long on the solution, put this configuration inside your Dev Server:

   static: {
      directory: path.resolve(__dirname, 'public'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress:true,
    historyApiFallback: true,
  },

If you are interested in understanding more about how this new configuration works and the documentation is very confusing check out this updated Tutorial