title: How "include" and "exclude" works in webpack loader
body: <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>