title: Hot reload in Electron/React application
body: <p>Hot reloading seems to no longer be working. I am not sure what could of changed in my setup, in fact as far as I can tell, and git logs show, nothing was changed.</p>
  
  <p>Regardless, Im trying to get reloading of CSS and Reacts <code>.jsx</code> files working.</p>
  
  <p>Currently, I run <code>npm run watch</code> followed by <code>npm run start</code> in another console tab. The application starts, but any changes in files are not reloaded. My package.json looks like the following:</p>
  
  <pre><code>{
    ...
    "main": "main.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "cross-env ENVIRONMENT=DEV electron main.js",
      "watch": "webpack-dev-server --hot --inline",
      "build": "webpack"
    },
    "dependencies": {
      "axios": "^0.15.2",
      "babel": "^6.5.2",
      "babel-loader": "^6.2.5",
      "babel-plugin-transform-class-properties": "^6.19.0",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babelify": "^7.2.0",
      "cross-env": "^3.1.1",
      "electron": "^1.3.4",
      "electron-prebuilt": "^1.4.2",
      "json-loader": "^0.5.4",
      "react": "^15.3.2",
      "react-dom": "^15.3.2",
      "react-router": "^2.8.1",
      "react-tap-event-plugin": "^1.0.0",
      "semantic-ui-react": "^0.56.13",
      "socket.io-client": "^1.5.0",
      "store": "^1.3.20",
      "webpack": "^1.13.3"
    },
    "devDependencies": {
      "css-loader": "^0.25.0",
      "style-loader": "^0.13.1",
      "webpack-dev-server": "^1.16.2"
    }
  }
  </code></pre>
  
  <p>Some unnecessary dependencies are omitted. My <code>webpack.config.js</code> looks like the following:</p>
  
  <pre><code>var path = require("path");
  
  module.exports = {
    entry: path.resolve(__dirname, "app/index.jsx"),
    output: {
      path: path.resolve(__dirname, "build"),
      publicPath: 'http://localhost:8080/build/',
      filename: 'app.js'
    },
    module: {
      loaders: [
          {
              test: /\.jsx?$/,
              loader: 'babel',
              exclude: /node_modules/
          },
          { 
              test: /\.css$/,
              loader: "style-loader!css-loader"
          },
          { 
              test: /\.json$/, 
              loader: "json-loader"
          }
      ]
    }    
  };
  </code></pre>
  
  <p>What am I missing to get hot reload working in this setup?</p>
  
  <p><strong>EDIT:</strong> So as you can see, the entry point is defined as <code>index.jsx</code>. This file is very simple, and looks like the following:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import styles from './styles.css'
  import routes from './router.jsx'
  
  ReactDOM.render(
    routes,
    document.getElementById('app')
  );
  </code></pre>
  
  <p>Whenever I make a change to this file, the hot reload is triggered. In addition, changes to files that are imported here (like styles.css) are also reloaded. The issue is, all of my components are obviously imported in my router. Any changes to my components therefore are not hot reloaded. How can I get this working properly?</p>