Why does Webpack command take so long even though I excluded node_modules?
<p>I have been trying to learn React and Webpack from <a href="https://www.youtube.com/watch?v=MhkGQAoc7bc&amp;list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b" rel="nofollow">ReactJS Tutorials</a>.
My issue is when I run webpack from within the top level directory of all my files, it takes usually around <strong>62392ms</strong>. However, in the tutorials his takes <strong>1394ms</strong>. I've read that having <strong>exclude</strong>'s should help increase performance time, but I already have excluded <strong>node_modules</strong>. I've tried switching my <strong>loader</strong> to just <strong>babel</strong> and it brought my webpack time down to <strong>13183ms</strong>, but that still seems awfully slow, especially when it's only transpiling one file(<strong>client.js</strong>). Is there anyone who knows why running the webpack command is so slow, as most of the other stackoverflow answers seem to point to include/excluding paths/directories and I've already done that?</p>

<p>My file structure is as below:</p>

<pre><code>node_modules
src
-&gt;  js
-&gt;-&gt;    client.js
-&gt;  client.min.js
-&gt;  index.html
.gitignore
package.json
webpack.config.js
</code></pre>

<p>My webpack.config.js looks like:</p>

<pre><code>var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: __dirname + "/src",
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        target: 'node',
        test: /\.jsx?$/,
        //include: [path.resolve(__dirname, "./src")],
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};
</code></pre>

<p>And my package.json looks like:</p>

<pre><code>{
  "name": "module-loaders",
  "version": "1.0.0",
  "description": "Learning React and Webpack through LearnCode.academy",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dustinchang/React_Learning_LearnCode.Academy.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/dustinchang/React_Learning_LearnCode.Academy/issues"
  },
  "homepage": "https://github.com/dustinchang/React_Learning_LearnCode.Academy#readme",
  "dependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}
</code></pre>

<p>I greatly appreciate any advice.</p>