How do I change webpack dev server's default port from 8080 to a different port?

Changing the default port of webpack-dev-server is straightforward. Typically, this setting is configured in the webpack configuration file. Here are the specific steps:

1. Find the webpack configuration file: In most projects, this file is typically named webpack.config.js.
2. Modify the devServer configuration: In this configuration file, locate the section named devServer. If it hasn't been configured yet, you may need to manually add this section.
3. Set the port property: Within the devServer object, set a property named port with the value of the desired port number. For example, if you want to change the port to 5000, you can set it as:

javascript
devServer: {
  port: 5000
}

1. Save and restart webpack-dev-server: After making the changes, save the configuration file and restart webpack-dev-server to apply the changes.

For example, consider the following webpack configuration file in your project:

javascript
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 8080  // Default port is 8080
    }
};

If you want to change the port to 5000, you simply need to change the value of the port property from 8080 to 5000:

javascript
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 5000  // Port is now 5000
    }

After this configuration, when you start webpack-dev-server, it will run on the new port 5000 instead of the default 8080 port.