How to watch certain node_modules changes with webpack-dev-server

Question

I\'m currently experimenting with a monorepo architecture.

What I would like to do is in my web package where I run webpack dev server I\'d like it to watch certain

Answer 1

Granted this question is not regarding Next.js or any specific framework, I'd like to post an answer related to Next.js here since I arrived here from Google as others might also.

Here is what worked for me in my next.config.js:

module.exports = {
  // ...
  webpackDevMiddleware: config => {
    // Don't ignore all node modules.
    config.watchOptions.ignored = config.watchOptions.ignored.filter(
      ignore => !ignore.toString().includes('node_modules')
    );

    // Ignore all node modules except those here.
    config.watchOptions.ignored = [
      ...config.watchOptions.ignored,
      /node_modules\/(?!@orgname\/.+)/,
      /\@orgname\/.+\/node_modules/
    ];

    return config;
  },
  // ...
}

This targets a specific organization of packages. If you need to just target a specific package:

module.exports = {
  // ...
  webpackDevMiddleware: config => {
    // Don't ignore all node modules.
    config.watchOptions.ignored = config.watchOptions.ignored.filter(
      ignore => !ignore.toString().includes('node_modules')
    );

    // Ignore all node modules except those here.
    config.watchOptions.ignored = [
      ...config.watchOptions.ignored,
      /node_modules([\\]+|\/)+(?!my-node-module)/,
      /\my-node-module([\\]+|\/)node_modules/
    ];

    return config;
  },
  // ...
}

This builds on Elhay's answer.

Answer 2

You can config in in webpack.config file or in WebpackDevServer option, to watch for changes also in node_modules (i think that by default webpack watching for changes in all files)

https://webpack.js.org/configuration/watch/#watchoptions-ignored

in the following example webpack ignored all changes in node_modules folder except specific module.

watchOptions: {
  ignored: [
    /node_modules([\\]+|\/)+(?!some_npm_module_name)/, 
    /\some_npm_module_name([\\]+|\/)node_modules/
  ]
}

ignored[0] = Regex to ignore all node_modules that not started with some_npm_module_name

ignored[1] = Regex to ignore all node_modules inside some_npm_module_name

You may also used this link npm linked modules don’t find their dependencies