Index.html refreshing but not hot module reloading. :)

[chocobuckle]

It's not the end of the world if you can't advise me on this, as I'm glad just to have index.html automatically refreshing at all - but after following your instructions my index.html is refreshing the entire page, instead of just reloading the section of html I edited. I was wondering if you can point out what I've done wrong. Again, no worries if you don't have a solution, but any help would be much appreciated...

// webpack.config.js
/* eslint-disable global-require */
const path = require('path');
const chalk = require('chalk');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FontelloPlugin = require('fontello-webpack-plugin');
const webpack = require('webpack');

const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';

if (PRODUCTION) {
  console.log(chalk.red('Now entering production.'));
} else {
  console.log(chalk.red('Now entering development.'));
}

const plugins = PRODUCTION
  ? [ // Plugins used only in production.
    new ExtractTextPlugin('styles.css'),
  ]
  : [ // Plugins used only in development.

  ];

// These are plugins used in both production and development.
plugins.push(
  new FontelloPlugin({
    config: require('./fontello.config.json'),
  }),
  new HTMLWebpackPlugin({
    template: path.join(__dirname, 'dev', 'index.html'),
    minify: {
      collapseWhitespace: true,
    },
  }),
  new webpack.DefinePlugin({
    DEVELOPMENT: JSON.stringify(DEVELOPMENT),
    PRODUCTION: JSON.stringify(PRODUCTION),
  })
);

const cssProd = ExtractTextPlugin.extract({
  use: [
    {
      loader: 'css-loader',
      options: {
        import: false,
        importLoaders: 1,
        minimize: false,
        sourceMap: true,
        url: false,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
});

const cssDev = [
  {
    loader: 'style-loader',
    options: {
      sourceMap: true,
    },
  },
  {
    loader: 'css-loader',
    options: {
      import: false,
      importLoaders: 1,
      minimize: false,
      sourceMap: true,
      url: false,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: 'inline',
    },
  },
];

module.exports = {
  entry: './dev/js/index.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  devtool: PRODUCTION ? 'source-map' : 'inline-source-map',
  plugins,
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'dev', 'js'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', { modules: false }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: PRODUCTION ? cssProd : cssDev,
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 40000,
            },
          },
          'image-webpack-loader',
        ],
      },
      {
        test: /\.html$/,
        use: 'raw-loader',
      },
    ],
  },
};

// index.js
if (DEVELOPMENT) {
  require('../index.html');
}

[chocobuckle]

Also, when I click 'preserve log' in the DevTools console then try hot module reloading index.html again I see '[HMR] Cannot apply update. Need to do a full reload!' in the console. So it is trying to do it indeed, but failing for some reason. :(

[chocobuckle]

"scripts": { "dev": "NODE_ENV=development webpack-dev-server --content-base build/ --inline --hot --open" },