How to compile scss files into separate css with HMR?

Question

JavaScript

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');

module.exports = {
  devtool: 'source-map',
  entry: './src/js/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/main.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['env'] }
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin('css/style.css')
  ],

  devServer: {
    contentBase: 'dist',
    compress: true,
    open: true
  }
};

Here is what is written in the console when changes are made in the scss file:

[WDS] Hot Module Replacement enabled.
2client?81da:80 [WDS] App updated. Recompiling...
client?81da:223 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Nothing hot updated.
log.js:24 [HMR] App is up to date.

Reload when editing js works fine.

Answer 1

The documentation says that this plugin does not work with HMR.