webpack-dev-server-fallback

Use a static directory as a fallback for requests to webpack-dev-server when the build isn't ready.

Useful in conjunction with HtmlWebpackPlugin to avoid blank screens and timeouts.

Don't use webpack-dev-server in production. This is for in-between cases.

Install

npm install webpack-dev-server-fallback --save(-dev)

Use

In such as webpack.config.js:

const webpackDevServerFallback = require('webpack-dev-server-fallback');
 
module.exports = {
  devServer: {
    before: webpackDevServerFallback()
  }
};

webpackDevServerFallback takes an options object with two properties:

• wait: milliseconds to wait for build to be ready before serving fallback (default: 300)
• directory: source for fallback files (default: "fallback", is passed to express.static)

module.exports = {
  devServer: {
    before: webpackDevServerFallback({wait: 1000, directory: 'dist'})
  }
};

If you have other business to conduct with devServer.before:

module.exports = {
 devServer: {
   before(app, server) {
     // ...code, code, code
     webpackDevServerFallback()(app, server);
   }
 }
};