Webpack dev server reloads but doesn't show Markup or CSS changes?

Question

So i'm pretty new to Webpack, and I finally got the webpack-dev-server running. It recompiles and refreshes page on save, and it shows changes to my JS code. But it doesn't seem to work well with my SASS or HTML files?

On a fresh start, it will show a change if I make it, but if I undo that change, it doesn't update. Looking around other posts, I tried added the "--hot" flag, and adding "inline" to my devServer in webpack config. This got it working for a style change, but won't show deleted or undone changes.

This is my package.json...

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "watch": "webpack --watch",
    "server": "webpack-dev-server --open --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  }
}

This is my webpack.config...

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');

module.exports = {
  entry: './src/javascript/index.js',

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

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    }),

    new HtmlWebPackPlugin({
      template: './dist/index.html',
      filename: 'index.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    inline: true,
    hot: true
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass')
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts'
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: !isDevelopment }
          }
        ]
      }
    ]
  },
  // Default mode is Production. Uses minifying
  mode: 'development'
};

I must have something wrong or out of place?

Any help or tips would be appreciated. Will provide additional info if needed. Thanks in advance!

Answer 1

I found a solution by adding "watchContentBase" to my devServer.

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    **watchContentBase: true,**
    inline: true,
    hot: true
  }