Need help for webpack configuration of css files as its not refreshing when changing anything in css file

Question

I am using webpack 4. i have a webpack configuration in my project where anything i change in css/scss files it is not taking effect in browser untill i stop and restart my frontend server. I am using reactjs, jquery and others in my projects.

my common configuration is like this::

common.parts.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

exports.defaultJSXRule = () => {
  return {
    test: /\.jsx?$/,
    use: ['babel-loader'],
    exclude: /node_modules/,
  };
};

exports.oldCSSRule = () => {
  return {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  };
};

exports.defaultCSSRule = () => {
  return {
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      },
      'postcss-loader',
    ],
  };
};

exports.defaultSCSSRule = () => {
  return {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      },
      'postcss-loader',
      'sass-loader',
    ],
  };
};

exports.bootstrap3Rule = () => {
  return {
    test: /bootstrap-sass\/assets\/javascripts\//,
    use: 'imports-loader?jQuery=jquery',
  };
};

exports.bootstrap4Rule = () => {
  return {
    test: /bootstrap\/dist\/js\/umd\//,
    use: 'imports-loader?jQuery=jquery',
  };
};

exports.defaultFontsRule = () => {
  return {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'url-loader',
  };
};

exports.defaultImagesRule = () => {
  return {
    test: /\.(jpe?g|png|gif|svg)$/,
    loader: 'url-loader',
  };
};

exports.jQueryExpose = () => {
  return {
    test: require.resolve('jquery'),
    use: [
      { loader: 'expose-loader', options: 'jQuery' },
      { loader: 'expose-loader', options: 'window.jQuery' },
      { loader: 'expose-loader', options: '$' },
    ],
  };
};

I am importing these common configurations in separate files wherever required like for example in affiliate.js file and its configuration is::

affiliate.js

const path = require("path");
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const parts = require("../common.parts.js"); // this is common config given above
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const affiliateBs4Config = {
  context: path.resolve("./app/javascript/external/affiliate"),
  entry: {
    affiliate: [
      path.resolve("./public/bootstrap-jumpseller.scss"),
      path.resolve("./app/javascript/external/affiliate")
    ]
  },
  output: {
    path: path.resolve("./public/affiliate/dist"),
    filename: "[name].js"
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", ".css", ".scss"]
  },
  module: {
    rules: [
      parts.defaultJSXRule(),
      parts.defaultCSSRule(),
      parts.defaultSCSSRule(),
      parts.defaultFontsRule(),
      parts.defaultImagesRule(),
      parts.bootstrap4Rule()
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
      Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: "exports-loader?Util!bootstrap/js/dist/util",
      Popper: "popper.js/dist/umd/popper.js",
      axios: "axios"
    }),
    new webpack.LoaderOptionsPlugin({
      postcss: [autoprefixer]
    })
  ]
};

module.exports = affiliateBs4Config;

And then in my webpack.config.js files:: I am importing different separate configurations defined and then exporting it like below:

webpack.config.js

const affiliateConfig = require("./lib/webpack/admin/affiliate");
const fontawesomeConfig = require("./lib/webpack/admin/fontawesome");

module.exports = [
  affiliateConfig,
  fontawesomeConfig
];

I want to know particularly about the css files and scss files that whenever i am making any changes in css/scss file then i have to all the time reload the frontend server for it to take effect. How can i fix it and what i am doing wrong in css or scss configuration above.