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 imported/required files are not necessary to be transformed. For example, js files in "node_module" have been processed. So there is no need to be transformed again by Babel loader. That is basically why we need "exclude: /node_modules/" in loader.

Similarly, if you know what files to be transformed by a loader, you can use "include".

Simply put, entry.js will include all the imported/required files. But among these files, only a few of them need to be transformed. That is why "loader" introduces "include" and "exclude".

I am still not quite clear about the reasons why we need use "include" or "exclude" in loader of webpack.

Because the entry js file will always need to include its imported/required js files recursively. All the imported/required files will be transformed by loader. If that is the case, why do we need "include" or "exclude" in loader?

One common case is "exclude: /node_modules/". The thing that confuses me is that if the entry js file need some files from the node_modules and then we exclude the node_modules. Then the final bundle file will not contain the requied file from node_modules. In that case, the final bundle.js will not work correctly. Am I missing anything here?

module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    path: path.join(__dirname,"public"),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
          presets: ['es2015']
        }
    }]
  }
};

Thanks

Derek

Juho Vepsäläinen Juho Vepsäläinen · Accepted Answer · 2016-06-15T10:38:58

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 (allowlist over denylist/blocklist) 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.

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

Update&Answer:

2 Answers