How "include" and "exclude" works in webpack loader
<h2>Update&amp;Answer:</h2>

<p>My misunderstand was:</p>

<blockquote>
  <p>All the imported/required files will be transformed by loader.</p>
</blockquote>

<p>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.</p>

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

<p>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".</p>

<hr>

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

<p>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? </p>

<p>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?</p>

<pre><code>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']
        }
    }]
  }
}; 
</code></pre>

<p>Thanks</p>

<p>Derek</p>