Why does the webpack4 dev server sometimes crash?

Question

webpack

I started to study webpack, everything seems to be nothing, there are a lot of tutorials, but during development, sometimes liveload started to crash. That is, I save, for example, a style file - and everything is in order - for an hour (approximately, always differently), everything is collected in dist/style.css, and the page is updated, new styles are applied. But sometimes /dista view folder is created /localhost%3a8081in which its own directory is created /dist, in which webpack already puts the updated styles. The page is updated, but the link is to the root css file, so the styles remain the same.
The question, in fact, is why this happens and how to avoid it?
webpack.config

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');

let conf = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "dist/"
  },
  devServer: {
    overlay: true,
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ExtractTextPlugin.extract({
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
      },
      {
        test: /\.html$/,
        loader: "raw-loader"
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
    new HtmlWebpackPlugin({
      title: 'payment page',
      template: './src/index.html',
    }),
  ],
};

module.exports = () => {
  conf.devtool = !devMode
    ? false
    : 'eval-sourcemap';

  return conf;
};