Webpack dev server watch options aggregateTimout does not work

Question

I need to delay my webpack dev server for ten seconds so other file will be ready.

my conifg file is :

   "devServer": {
    "historyApiFallback": true,
    "hot": false,
    "inline": false,
    "watchOptions": {
        "aggregateTimeout": 10000
    }

As i understood, once any file changed, webpack server should wait ten seconds before creating my bundles but the delay did not work and webpack start bundling once i change the file.

Any suggestions ? :(

Answer 1

I use webpack v5 with dev-server meet this problem,too.

Webpack-dev-server use chokidar to watch file. I find the parameter awaitWriteFinish can slove this problem.Read the @types\webpack-dev-server\index.d.ts,finding that watchFiles can set the chokidar options:

   /**
    * This option allows you to configure list of globs/directories/files
    * to watch for file changes.
    */
    watchFiles?: string | string[] | WatchFiles | Array<WatchFiles | string> | undefined;

    interface WatchFiles {
        options?: chokidar.WatchOptions | undefined;
        paths?: string[] | string | undefined;
    }

This wepack.config.js is work for me:

  devServer: {
    static: './dist',
    hot:true,
    open:true,
    watchFiles: {
      options:{
        awaitWriteFinish:{
          stabilityThreshold:2000
        }
      },
      paths:['src/**/*']
    }
  },

---

I think aggregateTimeout is not work:webpack-dev-server issues #1782