title: Webpack dev server can't detect changes in nested folders
body: <p>I have React app with structure like this:  </p>
  
  <pre><code>├── components
  │   ├── app
  │   │   └── App.js
  │   ├── grid
  │   │   ├── Cell.js
  │   │   ├── Grid.js
  │   │   └── Row.js
  │   └── navbar
  │       └── Navbar.js
  ├── store
  │   ├── apartments.js
  │   ├── api.js 
  │   ├── index.js
  │   └── orders.js
  ├── index.js
  ├── routes.js
  </code></pre>
  
  <p>when I change something in one of my components files webpack won't compile. But when I change files in "store" folder or <code>index.js</code> it'll compile successfully<br>
  Here the my config file:  </p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      entry: {
          bundle: './src/index.js'
      },
      output: {
          path: __dirname,
          filename: "bundle.js"
      },
      module: {
          rules: [
              {
                  use: 'babel-loader',
                  test: /\.js$/,
                  exclude: /node_modules/
              },
              {
                  use: ['style-loader', 'css-loader'],
                  test: /\.css$/
              }
          ]
      }
  };
  </code></pre>
  
  <p>I tried run <code>webpack-dev-server</code> with <code>--hot</code> flag.<br>
  Also installed <code>case-sensitive-paths-webpack-plugin</code><br>
  Specified <code>contentBase : __dirname</code> in dev-server config<br>
  it is all didn't help me<br>
  My webpack version: <code>2.6.1</code>, webpack-dev-server: <code>2.4.5</code><br>
  <strong>But sometimes it is just work</strong> and I can't understand why, it is some sort of magic for me. It can work after renaming files and folders or it worked after <code>case-sensitive-paths-webpack-plugin</code> instalation but then stop again.<br>
  Please can someone at least explain how I can debug this. I googled problem for two days and didn't find any solution.</p>