用webpack-dev-server这个插件，保存时浏览器自动刷新加载很慢，这是为什么呢老师？

上面一直在转圈圈，每次保存自动刷新要10秒左右才能把页面加载完成，很烦，我用的是谷歌浏览器，我的浏览器已经是最新版本，请问这个问题怎么解决呢？

这是我的webpack.config.js:

const path = require("path");
const resolve = (p) => path.resolve(__dirname, p);
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/pages/index/index.js",
    destination: "./src/pages/destination/index.js",
    details: "./src/pages/details/index.js",
  },
  output: {
    path: resolve("dist"),
    filename: "js/[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // 处理图片：
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "images/[name].[ext]",
              limit: 10000,
              esModule: false,
            },
          },
        ],
      },
      // 处理字体
      {
        test: /\.(woff2?|ttf|svg|eot)$/,
        loader: "url-loader",
        options: {
          name: "fonts/[name].[ext]",
          limit: 10000,
        },
      },
      // 处理art文件
      {
        test: /\.art$/,
        loader: "art-template-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/pages/index/index.art",
      filename: "index.html",
      chunks: ["index"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/destination/destination.art",
      filename: "destination.html",
      chunks: ["destination"],
    }),
    // 详情页
    new HtmlWebpackPlugin({
      template: "./src/pages/details/details.art",
      filename: "details.html",
      chunks: ["details"],
    }),
  ],

  // source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
  devtool: "cheap-module-eval-source-map",
  resolve: {
    // 自动补全（可以省略）的扩展名
    extensions: [".js"],
    // 路径别名
    //不能用在art文件中引入的组件路径，因为那个不是webpack打包处理的，是art-template-loader和art-template处理的
    // 哪里可以用？1、js，webapck亲自处理。2、css，js引入了css
    alias: {
      api: resolve("src/api"),
      utils: resolve("src/utils"),
      fonts: resolve("src/assets/fonts"),
      images: resolve("src/assets/images"),
      styles: resolve("src/assets/styles"),
      icon: resolve("src/assets/icon"),
      components: resolve("src/components"),
      pages: resolve("src/pages"),
    },
  },
};

package.json：

{
  "name": "m-mall",
  "version": "1.0.0",
  "description": "慕云游移动端",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open 'chrome'",
    "build": "webpack --config webpack.config.js --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "art-template-loader": "^1.4.3",
    "css-loader": "^4.2.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "art-template": "^4.13.2",
    "swiper": "^7.4.1"
  }
}

很苦恼，开发效率非常低，求老师帮帮忙！