How to ignore node_modules when running the watcher in Laravel Mix & Nuxt.js

Recently @stidges tweeted a tip that shows how to ignore node_modules when running webpack’s watcher.

Quick tip if you're running webpack (in my case Laravel Mix) and it's using a ton of CPU when watching: add your node_modules directory to the watcher ignored list. My CPU usage went from 100%+ to less than 3% ? pic.twitter.com/5HfoRnyPPk

— Stidges (@stidges) July 9, 2019

How to ignore node_modules when running webpack’s watcher in Laravel Mix

Here is the code snippet.

const mix = require('laravel-mix')

mix.webpackConfig({
  watchOptions: {
    ignored: /node_modules/
  }
})

This is a neat trick that optimize your machine’s CPU usage. @stidges claims that it went from 100%+ to less than 3%. Amazing.

When this tweet appeared in my timeline I was working on a Nuxt.js project and I tried to achieve the same thing.

I’ve searched the internets and did not find a clear explanation on how to do this, but after a while I figured it out.

If anyone is looking for the equivalent in @nuxt_js pic.twitter.com/yKuhRBwYa1

— Simon Depelchin (@SimonDepelchin) July 10, 2019

How to ignore node_modules when running webpack’s watcher in Nuxt.js

Here’s the code snippet for your nuxt.config.js

module.exports = {
  mode: 'spa',

  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  }
}

Here you go. Less CPU used, your machine will thank you!

Thanks @stidges for the tip!