Ignoring files with Webpack Dev Server

Question

I am using Emacs to edit the files in directories watched by Webpack's development server. Every time I make a change in a file, a backup file gets created in the same directory, like .#original_filename, even though I did not save the changes in Emacs. This causes the server's watcher to register a change even though I did not make one. Hence the server reloads every time I make a change in the file, and then does another reload when I save it.

This is somewhat confusing and time consuming. Looking at Webpack's documentation, I found out about the following option:

For some systems, watching many file systems can result in a lot of CPU or memory usage. It is possible to exclude a huge folder like node_modules:

ignored: /node_modules/ 

It is also possible to use anymatch patterns:

ignored: "files/**/*.js"

So I modified my config like below, to match and ignore the files starting with .:

devServer: {
    ...
    watchOptions: {
        ignored: './src/app/**/.*',
    },
    ...
}

I restart the dev server, but the watcher still registers the backup files as changes done to the codebase. What am I doing wrong?

Answer 1

the proper way to do it would be to use node's native module path
your webpack.config.js should look something like this:

const path = require('path')

module.exports = {
  ...
  devServer: {
    watchOptions: {
      ignored: [
        path.resolve(__dirname, 'dist'),
        path.resolve(__dirname, 'node_modules')
      ]
    }
  },
  ...
}

Answer 2

I found out a solution that works after trying a couple of times. For some reason, it doesn't work when there is ./ at the beginning, which should just mean the current directory.

Changing the matching pattern to the following works:

watchOptions: {
    ignored: '**/.*',
},