title: Issue with hot reloading on linux; cleared with deleteing node_modules and cache. Fixed
body: <p>first question here.
  Hot reloading used to working fine, then OS reinstall and now not working. Currently have an ugly fix. </p>
  
  <p>My friend set up a react project that I've been learning on. I had to re-install my OS recently. Prior to that hot reloading was working fine. </p>
  
  <p>With my current machine I can npm run okay for 1 session. after shutdown and startup hot reloading doesn't work. I will then:</p>
  
  <ol>
  <li>Delete node_modules</li>
  <li>npm cache clear --force</li>
  <li>npm install</li>
  </ol>
  
  <p>as found in this answer <a href="https://github.com/webpack/webpack-dev-server/issues/1003#issuecomment-328706990" rel="nofollow noreferrer">https://github.com/webpack/webpack-dev-server/issues/1003#issuecomment-328706990</a></p>
  
  <p>I am assuming its my machine- not sure where to look.
  Any help would be great. It's a slight pain to do this every time. Thanks</p>
  
  <p>I'm using Xubuntu, VScode, firefox. </p>
  
  <p>Contents of webpack.config.js. Not sure if it helps</p>
  
  <pre><code>const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const path = require('path');
  
  function createWebpackConfig() {
    const prod = process.env.NODE_ENV === 'production' || false;
    const dev = !prod;
    const buildDir = path.join(__dirname, 'build');
    const projDir = path.join(__dirname, 'src');
    const commonDir = path.join(projDir, 'common');
  
    const devPlugins = [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ];
  
    const prodPlugins = [
      new MiniCssExtractPlugin({
        filename: 'main-[contenthash].css',
        allChunks: true
      }),
      new webpack.optimize.AggressiveMergingPlugin()
    ];
  
    return {
      entry: {
        app: path.join(projDir, 'index.js')
      },
  
      output: {
        path: buildDir,
        sourceMapFilename: '[name].map',
        filename: `[name]-[${dev ? 'hash' : 'chunkhash'}].js`
      },
  
      resolve: {
        modules: ['src', 'node_modules'],
        extensions: ['.js', '.jsx', '.css', '.scss'],
        alias: {
          actions: path.join(commonDir, 'actions'),
          reducers: path.join(commonDir, 'reducers'),
          assets: path.join(commonDir, 'assets'),
          components: path.join(commonDir, 'components'),
          styles: path.join(commonDir, 'styles'),
          commonStyles: path.join(commonDir, 'styles', 'common.scss'),
          utils: path.join(commonDir, 'utils')
        }
      },
  
      cache: dev,
  
      devtool: dev ? 'cheap-module-source-map' : false,
  
      stats: {
        colors: true,
        reasons: true,
        hash: Boolean(prod),
        version: Boolean(prod),
        timings: true,
        chunks: Boolean(prod),
        chunkModules: Boolean(prod),
        cached: Boolean(prod),
        cachedAssets: Boolean(prod)
      },
  
      plugins: [
        new HtmlWebpackPlugin({
          template: path.join(projDir, 'index.template.html'),
          title: 'IMDB Clone',
          favicon: path.join(commonDir, 'assets', 'favicon.ico'),
          inject: false,
          minify: {
            removeComments: Boolean(prod),
            collapseWhitespace: Boolean(prod),
            removeRedundantAttributes: Boolean(prod),
            useShortDoctype: Boolean(prod),
            removeEmptyAttributes: Boolean(prod),
            removeStyleLinkTypeAttributes: Boolean(prod),
            keepClosingSlash: Boolean(prod),
            minifyJS: Boolean(prod),
            minifyCSS: Boolean(prod),
            minifyURLs: Boolean(prod)
          },
          baseUrl: dev ? '' : "location.protocol + '//' + location.host"
        }),
        new webpack.ProvidePlugin({
          React: 'react',
          PropTypes: 'prop-types',
          classNames: 'classnames'
        })
      ].concat(dev ? devPlugins : prodPlugins),
  
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory: dev
              }
            }
          },
          {
            test: /\.css$/,
            include: /node_modules/,
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.s?css$/,
            exclude: /node_modules/,
            use: dev
              ? [
                  'style-loader',
                  {
                    loader: 'css-loader',
                    options: {
                      minimize: Boolean(prod),
                      localIdentName: dev ? '[path][name]__[local]' : '',
                      modules: true,
                      url: false,
                      sourceMap: true,
                      importLoader: 2
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true
                    }
                  }
                ]
              : MiniCssExtractPlugin.extract({
                  fallback: 'style-loader',
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        minimize: Boolean(prod),
                        modules: true
                      }
                    },
                    'sass-loader'
                  ]
                })
          },
          {
            test: /\.html$/,
            exclude: [/node_modules/, path.join(__dirname, 'src', 'index.template.html')],
            use: [
              {
                loader: 'html-loader',
                options: {
                  minimize: true
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|eot|svg|ttf|woff|woff2)?(\?[a-z0-9#=&amp;.]+)?$/,
            use: 'file-loader'
          }
        ]
      },
  
      devServer: {
        historyApiFallback: true
      }
    };
  }
  
  module.exports = createWebpackConfig();
  </code></pre>