WebPack Loader Config: To exclude or to include node_modules?

Question

Should I include or exclude node_modules for various loaders in WebPack?

I've seen a number of configs that implicitly include it, and some that explicitly exclude it (either by excluding node_modules or only including the src or client folder) in various loaders (JS, TS, CSS, SCSS, file, url, raw, etc.)

I don't understand why you would or wouldn't include it. Obviously it brings in the code and includes it in the output build either way, I'm guessing it's just whether the loaders process it or not. I've only encountered one node module where it didn't work if the loader processed it, and so far none that didn't work one way or another otherwise.

Aside from one package, none of the others seem to care if they're included or excluded. What difference does it make to the output/browser?

For example:

'use strict';

const path = require('path');

module.exports = (root) => {
  return {
    // BABEL LOADER
    // Reference: https://github.com/babel/babel-loader
    // Transpile .js files using babel-loader
    // Compiles ES6 and ES7 into ES5 code

    // Run on .js files
    test: /\.js$/,

    // Use the babel-loader
    use: [
      // Babel transpiler, see .babelrc for configuration
      {
        loader: 'babel-loader',
        options: {
          sourceMap: true, // Emit sourcemaps
          cacheDirectory: true // Cache compilation
        }
      }
    ],
    // Aside from one package, none of the others seem to care if they're included or excluded.
    include: [ path.resolve(root, 'client') ]
  };
};

Aftab Khan Aftab Khan · Accepted Answer · 2017-06-28T18:42:54

Here's is what I follow and why.

All .js files I exclude node_modules

General .js loader chain is ESlint then Babel
Linting is not needed since, you cannot do anything with the Linting results of node_modules, unless you fix all the lint warnings/errors(don't think there will be any) and the creater of that modules accepts those changes and publishes it.
The published code in most of the scenarios are ES5 code, you don't need babel.

If you have anything that is a deviation from this, you can include those modules.

Result: I have had 20x increase in build times, since I had around 500-600 npm modules used in my project (including all dependencies). It would have traversed through 1000-2000 .js where it need not have.

For other files: I've found that you might not be adding exclude for node_modules since, for example CSS would have been require()ed within a node module library it has to get bundled too.

WebPack Loader Config: To exclude or to include node_modules?

1 Answers