How to use webpack-dev-server - 10 common examples

// See https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js
    setup(app) {
      app.use(errorOverlayMiddleware());
    },
  }

  let compiler
  try {
    compiler = webpack(webpackConfig);
  }
  catch (e) {
    console.error(e.message)
    process.exit(1)
  }

  const devServer = new WebpackDevServer(compiler, options);

  devServer.listen(port, (err, result) => {
    if (err) {
      return console.log(err);
    }

    console.log(chalk.cyan('Starting the development server...'));
  });
}

function startDevServer(webpackOptions, options) {
      addDevServerEntrypoints(webpackOptions, options);
      let compiler;
      try {
        compiler = webpack(webpackOptions);
      } catch (e) {
        if (e instanceof webpack.WebpackOptionsValidationError) {
          console.error(colorError(options.stats.colors, e.message));
          process.exit(1); // eslint-disable-line
        }
        throw e;
      }

      const suffix = options.inline !== false || options.lazy === true ? '/' : '/webpack-dev-server/';

      let server;
      try {
        server = new WebpackDevServer(compiler, options);

extensions: ['', '.js', '.json', '.jsx']
  },
  plugins: [
    new webpack.ProvidePlugin({
        // Makes the keys (i.e. $, _, classNames, etc.) available in any module
        $:          'jquery',
        jQuery:     'jquery',
        _:          'lodash',
        classNames: 'classnames',
        my:         path.resolve(__dirname, 'config/config.js')
    }),
    // new HtmlWebpackPlugin()
  ]
});

let app = new WebpackDevServer(compiler, {
  contentBase: path.resolve(__dirname, 'public'),
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/src/',
  stats: {colors: true},
  inline: true,
  historyApiFallback: true
});

// Serve static resources
app.use('/', express.static(path.resolve(__dirname, 'public')));
app.listen(APP_PORT, () => {
  console.log(`App is now running on http://localhost:${APP_PORT}`);
});

export default function (app) {
    let bundleStartTime = null;

    // Inform the user on the status of webpacking
    let compiler = Webpack(WebpackConfig);
    compiler.plugin('compile', () => {
        console.log('Bundling the project...'); // eslint-disable-line
        bundleStartTime = Date.now();
    });
    compiler.plugin('done', () => {
        console.log('Bundling finished in ' + (Date.now() - bundleStartTime) + 'ms!'); // eslint-disable-line
    });

    let bundler = new WebpackDevServer(compiler, {
        // Set the content base, where the files are served from
        contentBase: path.join(__dirname, 'public'),

        // Tell Webpack to serve our bundled application from the assets path. When proxying:
        // http://localhost:3000/assets -> http://localhost:8080/assets
        publicPath: '/bundle/',

        // Configure hot replacement
        hot: true,

        historyApiFallback: false,

        // Terminal configuration
        inline: true,
        quiet: false,
        noInfo: true,

// Serve the Relay app
const compiler = webpack({
  entry: path.resolve(__dirname, 'js', 'app.js'),
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        test: /\.js$/,
      }
    ]
  },
  output: {filename: 'app.js', path: '/'}
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  publicPath: '/js/',
  proxy: { '/graphql': config.scapholdUrl },
  stats: {colors: true}
});
// Serve static resources
app.use('/', express.static(path.resolve(__dirname, 'public')));
app.listen(APP_PORT, () => {
  console.log(`App is now running on http://localhost:${APP_PORT}`);
});

publicPath: '/.assets/',
    contentBase: './ui/assets',
    stats: WEBPACK_STATS_OPTIONS,
    noInfo: false,
    disableHostCheck: true,
    proxy: {
      '/': {
        target: 'http://localhost:3081',
        // Avoid crashing on "read ECONNRESET".
        onError: err => console.error(err),
        onProxyReqWs: (_proxyReq, _req, socket) =>
          socket.on('error', err => console.error('WebSocket proxy error:', err)),
      },
    },
  }
  WebpackDevServer.addDevServerEntrypoints(webpackConfig, options)
  const server = new WebpackDevServer(createWebpackCompiler(webpackConfig), options)
  await new Promise((resolve, reject) => {
    server.listen(3080, '0.0.0.0', err => (err ? reject(err) : resolve()))
  })
}

modules: false,
      builtAt: false,
    })
    .contentBase(false)
    .hot(true);

  const options = config.toConfig();

  // webpack-chain 中没有 after 这个方法，只能这样赋值
  Object.assign(options.devServer, {
    after: (app, server) => {
      router(app, cwd);
    }
  });

  WebpackDevServer.addDevServerEntrypoints(options, options.devServer);
  const compiler = webpack(options);
  const server = new WebpackDevServer(compiler, options.devServer);
  server.listen(port, '0.0.0.0', () => {
    console.log();
    console.log(chalk.yellow(`Starting at http://127.0.0.1:${port}`));
    console.log();
  });
};

publicPath: '/.assets/',
        contentBase: './ui/assets',
        stats: WEBPACK_STATS_OPTIONS,
        noInfo: false,
        disableHostCheck: true,
        proxy: {
            '/': {
                target: 'http://localhost:3081',
                // Avoid crashing on "read ECONNRESET".
                onError: err => console.error(err),
                onProxyReqWs: (_proxyReq, _req, socket) =>
                    socket.on('error', err => console.error('WebSocket proxy error:', err)),
            },
        },
    }
    addDevServerEntrypoints(webpackConfig, options)
    const server = new WebpackDevServer(createWebpackCompiler(webpackConfig), options)
    await new Promise((resolve, reject) => {
        server.listen(3080, '0.0.0.0', (err?: Error) => (err ? reject(err) : resolve()))
    })
}

import webpack from 'webpack'
import WebpackDevServer from 'webpack-dev-server'
import config from './webpack.config.babel'
let data = config[0]
data.entry.app.unshift('webpack-dev-server/client?http://localhost:3000', 'webpack/hot/dev-server')

new WebpackDevServer(webpack(data), {
  publicPath: data.output.publicPath,
  contentBase: './public',
  hot: true,
  historyApiFallback: false,
  /*    proxy: {
   "*": "http://localhost:9090"
   }, */
  // webpack-dev-middleware options
  quiet: false,
  noInfo: false,
  // lazy: true,
  // filename: "node.bundle.js",
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },

// hot reload
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // stats
    function notifyStatsPlugin() {
      this.plugin('done', notifyStats)
    },
    function writeStatsPlugin() {
      this.plugin('done', writeStats)
    }
  ]
}

const compiler = webpack(config)

const devServer = new WebpackDevServer(compiler, {
  contentBase: 'http://' + host + ':' + port,
  quiet: true,
  noInfo: true,
  hot: true,
  inline: true,
  lazy: false,
  publicPath: config.output.publicPath,
  headers: {
    'Access-Control-Allow-Origin': '*'
  },
  stats: {
    colors: true
  }
})

devServer.listen(port, host, () => {