title: Uncaught Error: [HMR] Hot Module Replacement is disabled
body: <p>I'm using <code>webpack</code> for my build which works without any problems using the <code>webpack-dev-server</code> (<code>npm run watch</code>), however when I try to create a production build (<code>npm run build</code>) I seem to get the error in the console when I try to load the website and nothing shows up at all on-screen.</p>
  
  <blockquote>
    <p>Uncaught Error: [HMR] Hot Module Replacement is disabled.</p>
  </blockquote>
  
  <p>I have a few questions about this:</p>
  
  <ol>
  <li><p>My understanding of using <code>Hot Module Replacement</code> is that its designed for making life easier during development, it should not be used in production deployments. Is that correct?</p></li>
  <li><p>Given the below, why is <code>Hot Module Replacement</code> is being used? I don't see what's driving it.</p></li>
  <li><p>What's the best practice when it comes to production builds, should I have a separate <code>webpack</code> config for prod and dev? Ideally I'd like to make use of a single config purely to ease maintenance.</p></li>
  </ol>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    // ...
    "scripts": {
      "build": "webpack --progress --colors --production",
      "watch": "webpack-dev-server --inline --hot --progress --colors"
    },
    "dependencies": {
      "bootstrap": "^3.3.6",
      "bootstrap-sass": "^3.3.6",
      "bootstrap-webpack": "0.0.5",
      "extract-text-webpack-plugin": "^1.0.1",
      "html-webpack-plugin": "^2.15.0",
      "jquery": "^2.2.3",
      "node-sass": "^3.4.2",
      "react": "^15.0.1",
      "react-bootstrap": "^0.28.5",
      "react-dom": "^15.0.1",
      "react-redux": "^4.4.1",
      "react-router": "^2.0.1",
      "react-router-redux": "^4.0.1",
      "redux": "^3.3.1",
      "redux-thunk": "^2.0.1",
      "webpack": "^1.12.14"
    },
    "devDependencies": {
      "babel-core": "^6.7.4",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "css-loader": "^0.23.1",
      "exports-loader": "^0.6.3",
      "file-loader": "^0.8.5",
      "imports-loader": "^0.6.5",
      "less": "^2.6.1",
      "less-loader": "^2.2.3",
      "redux-devtools": "^3.2.0",
      "redux-logger": "^2.6.1",
      "sass-loader": "^3.2.0",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack-dev-server": "^1.14.1"
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var webpack = require('webpack');
  var htmlWebpackPlugin = require('html-webpack-plugin');
  var path = require('path');
  
  module.exports = {
      entry: [
          'webpack/hot/only-dev-server',
          path.resolve(__dirname, 'app/index.js')
      ],
      output: {
          path: path.resolve(__dirname, 'public'),
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: [ 'es2015', 'react' ] } },
              { test: /\.scss$/, loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets/') },
              { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file' }
          ]
      },
      resolve: {
          modulesDirectories: ['node_modules']
      },
      plugins: [
          new webpack.NoErrorsPlugin(),
          new htmlWebpackPlugin({
              filename: 'index.html',
              template: './index.html',
              inject: false
          }),
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery"
          }),
          new webpack.optimize.OccurenceOrderPlugin()
      ]
  };
  </code></pre>