Currently I am learning to use Webpack. In the course of this I am building up a boilerplate. To make the development a bit faster and more dynamic, I would like to use the webpack-dev-server. This can also be started correctly. The problem is that changes are not visible. Even if I refresh the page manually, the changes are not there.

My folder strucure:

├── dist
│   └── bundle.js
├── src
│   ├── scss
│   │   └── app.scss
    └── index.js
├── webpack.config.js
├── package.json
├── package.lock.json
└── index.html

My webpack-config:

const path = require("path");

module.exports = {
    entry: './src/index.js',
    mode: "development",
    cache: true,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: path.resolve(__dirname, '')
    },
    module: {
        rules: [
          {
            test: /\.s[ac]ss$/i,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader",
            ],
          }
          }
        ],
    },
    devServer: {
        static: "./",
        compress: true,
        port: 9000,
        hot: true
    },
}

For example, I make a change in app.scss. This only becomes visible when I bundle webpack. I know that the dev-server returns the data from the memory and does not write the changes to the files.