Что делать если страница долго обновляется при любых внесений изменений после подключения к webpack bootstrap?

Question

[Asphyxia089]

Только начал работать в webpack, после подключения bootstrap к webpack долго перезагружается страница после изменений в коде, также Vs code стал долго подгружать все. Пробовал хэшировать стили бп но они хэшированы только в собранном проекте, а не при разработке.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


module.exports = {
    mode: 'development',
    entry: {
        bundle: path.resolve(__dirname, 'src/index.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name][contenthash].js',
        clean: true,
        assetModuleFilename: 'assets/[hash][ext][query]',
    },
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        port: 3000,
        open: true,
        hot: true,
        compress: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    },
                },
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/i,
                type: 'asset/resource',
            }


        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/template.html',
        }),
    ],
}

index.js

import 'bootstrap';
import app from './app';
import './styles/main.scss';
import './svg';

main.scss

@use "header";
@use "svg";

@import url(https://fonts.googleapis.com/css?family=Inter:300,regular,500,600,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Prata:regular&display=swap);
@import "~bootstrap/scss/bootstrap";

$mainFont: "Inter";
$extraFont: "Prata";

body {
  background-color: green;
  font-family: $mainFont;
}

package.json

{
  "name": "goldy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "autoprefixer": "^10.4.13",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "postcss-loader": "^7.0.2",
    "sass": "^1.58.0",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3"
  }
}