webpack dev server not reloading when changing src files

Question

I have an issue that when i change my src js or scss nothing happens in my dev server which is running if i change my dist folder files and refresh works also when i do "build": "webpack --mode production". In my package.json I have "start": "webpack-dev-server --mode development --open --hot" dependacies: "webpack": "^4.15.1", webpack-cli": "^3.0.8, webpack-dev-server": "^3.1.4.

I'm also using Silverstripe 3.7.1-rc1

My webpack config filebelow:

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

module.exports = {
 entry: "./src/index.js",
 output: {
  path: path.join(__dirname, "/dist"),
  filename: "index_bundle.js"
 },
 devServer: {
  public: 'localhost:9743/able_ss3', 
  contentBase: path.join(__dirname, "/dist"),
  port: 9743,
  proxy: {
  '/able_ss3': {
    target: "http://localhost:80"
  }
 },

 },
 module: {
  rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  },
  {
    test: /\.(scss|css)$/,
    use:  [
       MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"
      ],
  }

]
},
plugins: [
 new MiniCssExtractPlugin({
  filename: "[name]-styles.css",
  chunkFilename: "[id].css"
 })

]
};