webpack-dev-server Version 4 Configuration Example

webpack-dev-server.config.js

'use strict';

const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const paths = require('./paths');
const fs = require('fs');

const host = process.env.HOST || '0.0.0.0';

module.exports = function(proxy, allowedHost) {
  return {
    compress: true,
    static: [paths.appPublic],
    dev: { publicPath: '/' },
    host,
    firewall: false,
    historyApiFallback: {
      disableDotRule: true,
    },
    public: allowedHost,
    proxy,
    port: 3000,
    client: { progress: true, overlay: false, needClientEntry: false },
    onBeforeSetupMiddleware(app, server) {
      if (fs.existsSync(paths.proxySetup)) {
        require(paths.proxySetup)(app);
      }
      app.use(evalSourceMapMiddleware(server));
      app.use(errorOverlayMiddleware());
      app.use(noopServiceWorkerMiddleware('/'));
    },
  };
};