webpack-dev-server not reloading on html or sass change

Question

My project has this structure:

\root    
   \webpack.config.js
   \public
     \ index.html
     \ ...
     \ css
     \ directives
     \ views   
     \ dist (webpack output)
       \app.js
       \ index.html
       \ app.js.map   
       \ style.css
       \ style.css.map

when i use webpack-dev-server I launch it from /root and it loads the app. But, when i change a sass file or html file it does not reload. What is wrong with the webpack config?

Command to launch webpack:

$ cd root
$ webpack-dev-server

Webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const webConfig = {
  entry: path.join(__dirname, 'public', 'js', 'app'),
  output: {
    path: path.join(__dirname, 'public', 'dist'),
    filename: 'app.js'
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['.js'],
    enforceExtension: false,
  },
  devtool: 'source-map',
  devServer:{
    contentBase: 'public/',
    publicPath: 'public/'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader?modules,localIdentName=[name]__[local]--[hash:base64:5]!sass-loader'
        }),
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

module.exports = webConfig;

Answer 1

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

“inline” option adds “Live reloading” for the entire page. “hot” option enables “Hot Module Reloading” that tries to reload just the component that’s changed (instead of the entire page). If we pass both options, then, when the source changes, the webpack-dev-server will try to HMR first. If that doesn’t work, then it will reload the entire page.

Try adding this to your webpack.config file:

devServer:{
    contentBase: 'public/',
    publicPath: 'public/',
    inline: true,
    hot: true,
  },

If you want, you can also call a script from your package.json file. Some thing like that:

...
scripts: {
   "watch": "webpack-dev-server --progress --colors --hot --inline",
}
...

Answer 2

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

With webpack 5, you will want to use the option watchFiles:

devServer: {
  watchFiles: ["./public/*"], // string [string] object [object]
  port: 3000,
  open: true,
  hot: true,
},

View the official docs about the watchFiles option.