How “include” and “exclude” works in webpack loader

Question

Update&Answer:

My misunderstand was:

All the imported/required files will be transformed by loader.

However, some

Answer 1

The problem is that without that exclude (or an include) webpack would traverse through the dependencies when you point to them at your code and process them. Even though that could work, it would come with a heavy performance penalty.

I prefer to set up an include myself (whitelist over blacklist) as that gives me more control over the behavior. I include my application directory and then add more items to the include based on the need. This allows me to make exceptions easily and process bits from node_modules if absolutely needed.

Answer 2

The answers so far haven't really answered your core question. You want to know how your bundled app still manages to function even though its dependencies have been 'excluded'.

Actually, those 'include' and 'exclude' properties are telling the loaders whether to include/exclude the files described (such as the contents of node_modules), not webpack itself.

So the 'excluded' modules you import from node_modules will be bundled - but they won't be transformed by babel. This is usually the desired behaviour: most libraries are already transpiled down to ES 5.1 (or even ES 3), and so wasting CPU cycles parsing them with babel (for instance) is pointless at best. At worst, as in the case of large single-file libraries like jQuery, it can throw an error and bring your build to a crashing halt. So we exclude node_modules.