How to make webpack so that when sass is updated, it will auto-refresh in the browser?

Question

Sass

Good afternoon, here is my config, thanks for the help guys!

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: [
  './app/js/index.js'
],
  output: {
    filename: './main.js'
  },
  devtool: "source-map",
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, './app/js/index.js'),
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
            use: [ "style-loader", "css-loader", "sass-loader" ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./app/index.html",
      filename: "./index.html"
    })
  ]
};

{
  "name": "best",
  "description": "Gulp + Webpack",
  "main": "index.js",
  "author": "Cyberial Syntwaiser",
  "license": "ISC",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "clear": "del-cli dist",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "browser-sync": "2.26.3",
    "del": "3.0.0",
    "del-cli": "^1.1.0",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-cache": "1.1.1",
    "gulp-concat": "2.6.1",
    "gulp-cssnano": "2.1.3",
    "gulp-imagemin": "^5.0.3",
    "gulp-plumber": "1.2.1",
    "gulp-rename": "1.4.0",
    "gulp-sass": "4.0.2",
    "gulp-uglifyjs": "0.6.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-pngquant": "^7.0.0",
    "node-sass": "^4.11.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

Answer 1

npm install style-loader css-loader --save-dev