title: Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working
body: <p>I have gone through many answers on StackOverflow &amp; on GitHub issues as well but, I am still stuck in Hot Module Replacement in Webpack. I am using <code>npm start</code> to run my server with <code>webpack-dev-server --hot --inline</code>. <strong>I am trying to change code in my React component, but nothing happens in the browser</strong>.</p>
  <p>I am using Google Chrome Version 49.0.2623.87 (64-bit) on Ubuntu 14.04LTS.</p>
  <p>In my browser <code>console</code>, I am getting log messages as</p>
  <blockquote>
  <p>[HMR] Waiting for update signal from WDS...</p>
  <p>[WDS] Hot Module Replacement enabled.</p>
  </blockquote>
  <p>But, no hot/live reload is happening. Nothing gets displayed when I change code in my React component file. I was following first video of this tutorial, <a href="https://egghead.io/lessons/react-react-fundamentals-development-environment-setup" rel="nofollow noreferrer">Egghead.io/ReactFundamentals</a> where everything worked fine.</p>
  <p>Following are my package.json &amp; webpack.config.js files.</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;react-fundamentals&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;Fundamentals of ReactJS&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack-dev-server --hot --inline&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;react&quot;: &quot;^15.0.0-rc.2&quot;,
      &quot;react-dom&quot;: &quot;^15.0.0-rc.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;babel&quot;: &quot;^6.5.2&quot;,
      &quot;babel-core&quot;: &quot;^6.7.2&quot;,
      &quot;babel-loader&quot;: &quot;^6.2.4&quot;,
      &quot;babel-preset-es2015&quot;: &quot;^6.6.0&quot;,
      &quot;babel-preset-react&quot;: &quot;^6.5.0&quot;,
      &quot;react-hot-loader&quot;: &quot;^1.3.0&quot;,
      &quot;webpack&quot;: &quot;^1.12.14&quot;,
      &quot;webpack-dev-server&quot;: &quot;^1.14.1&quot;
    }
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>module.exports = {
    context: __dirname,
    entry: &quot;./main.js&quot;,
    output: {
      path: __dirname,
      filename: &quot;bundle.js&quot;
    },
    devServer: {
      port: 7777
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: &quot;babel&quot;,
          query: {
            presets: [&quot;es2015&quot;, &quot;react&quot;]
          }
        }
      ]
    }
  }
  </code></pre>
  <p>It will be great if someone can guide me through this issue as I am not able to proceed further efficiently with the tutorial.</p>
  <blockquote>
  <p><strong>Update</strong> I have posted the answer below.</p>
  </blockquote>