Understand Webpack Output
<p>I try to optimise our 6s build time in watch mode with 1200 modules (95% vendor). I try to understand what is happening so I can make it faster. </p>

<p>Things I don't understand:</p>

<ul>
<li>Is [emitted] means the given chunk was built?</li>
<li>How can I verify that the given chunk is rebuilt or not?</li>
<li>How can I see the chunkHash? (I want to make sure webpack sees the same way as I with md5)</li>
<li>What optimisations can I look for?</li>
</ul>

<p>Facts:</p>

<ul>
<li>The vendor bundle is not written to disk in watch mode if application code changes, I verified with modified date and by deleting it. The file was not created when rebuild triggered. Also, md5 hash doesn't change for the vendor code.

<ul>
<li>Most time spent in modules building, the module counter running from 0->1200. </li>
</ul></li>
</ul>

<p>The webpack config is the following: </p>

<pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchIgnorePlugin = require('watch-ignore-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

function isExternal(module) {
    var userRequest = module.userRequest;

    if (typeof userRequest !== 'string') {
          return false;
        }

    return userRequest.indexOf('bower_components') &gt;= 0 ||
             userRequest.indexOf('node_modules') &gt;= 0 ||
             userRequest.indexOf('libraries') &gt;= 0;
}

module.exports = {
  context: __dirname + "/src",
  cache: true,
  cacheDirectory: '.cache',
  entry: {
      index: ["babel-polyfill", "./index"],
      login: "./login"
  },
  resolve: {
    alias: {
      config: path.join(__dirname, 'src/config', `${process.env.NODE_ENV || 'development'}`)
    },
    modulesDirectories: [
      'node_modules',
    ],
    unsafeCache: true,
    extensions: ["", ".js", ".jsx"]
  },
  devtool: 'eval',
  module: {
    loaders: [{
      test: /\.scss$/,
      include: /src/,
      exclude: /node_modules/,
      loader: ExtractTextPlugin.extract('css!sass')
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      include: /src/,
      loaders: ['style', 'css?sourceMap'],
    },
    {
      test: /\.jsx?$/,
      include: /src/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        "cacheDirectory": ".cache",
        "presets":  ["es2015", "stage-0", "react"],
        "plugins":  ["transform-class-properties", "transform-object-rest-spread"]
      }
    }],
    noParse: [
      /underscore\/underscore\.js$/,
      /react-with-addons\.js$/,
    ]
  },
  output: {
    filename: "[name].bundle.js",
    path: __dirname + "/dist",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module) {
        return isExternal(module);
      },
    }),
    new WatchIgnorePlugin([
      path.resolve(__dirname, './node_modules/'),
      path.resolve(__dirname, './.git/')
    ]),
    new CopyWebpackPlugin([
      { from: 'static', to: 'static' }
    ]),
    new CopyWebpackPlugin([
      { from: 'login.html', to: 'login.html' }
    ]),
    new CopyWebpackPlugin([
      { from: 'index.html', to: 'index.html' }
    ]),
    new ExtractTextPlugin('[name].css', {
      allChunks: true
    })
  ],
  watchOptions: {
    poll: 300,
    ignore: /node_modules/,
  },
  externals: {}
}
</code></pre>

<p>The output in watch mode: </p>

<pre><code>[mip] (+master)&gt; node node_modules/webpack/bin/webpack.js --watch --progress --display-chunks --display-cached --display-reasons -v
Hash: fadbfa42fdd7810886d6  
Version: webpack 1.13.3
Time: 6346ms
                 Asset       Size  Chunks             Chunk Names
       index.bundle.js     582 kB       0  [emitted]  index
       login.bundle.js    8.88 kB       1  [emitted]  login
      vendor.bundle.js     4.9 MB       2  [emitted]  vendor
             index.css    87.2 kB       0  [emitted]  index
             login.css    44.4 kB       1  [emitted]  login
   static/img/logo.png    4.28 kB          [emitted]  
static/img/favicon.ico     270 kB          [emitted]  
            login.html  573 bytes          [emitted]  
            index.html  574 bytes          [emitted]  
chunk    {0} index.bundle.js, index.css (index) 519 kB {2} [rendered]
    [0] multi index 40 bytes {0} [built]
     + 100 hidden modules
chunk    {1} login.bundle.js, login.css (login) 7.33 kB {2} [rendered]
     + 5 hidden modules
chunk    {2} vendor.bundle.js (vendor) 4.41 MB [rendered]
     + 1191 hidden modules
</code></pre>