How do you configure webpack-dev-server?

You configure webpack-dev-server in the devServer key of webpack.config.js and start it with npx webpack serve. It serves your app during development and rebuilds as you save.

module.exports = {
  devServer: {
    static: './dist',
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true, // For SPA routing
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    ]
  }
};

• static serves files from a folder, public by default.
• hot turns on Hot Module Replacement, which is already the default.
• compress enables gzip.
• open opens the browser after the server starts.
• historyApiFallback serves index.html in place of 404 responses, which client-side routing needs.
• proxy forwards API requests such as /api to another server. Since webpack-dev-server 5, it takes an array of objects with a context list.

changeOrigin rewrites the Host header to match the target, because the original header is kept by default.