webpack-dev-server 启动但不会在文件更改时重新加载

Question

我不明白为什么检测到修改时 webpack 没有重新加载页面。 DevServer 成功启动，但不会在编辑器（js 和 css）中更改代码时自动重新加载页面。我必须手动刷新浏览器才能看到更改。

我失去了几天并尝试了很多不同的设置，但没有任何效果。 现在我在一个项目的中间，我不能放下 webpack 并且由于项目本身的大小，手动重新加载开始需要几秒钟。现在只能救我DevServer自动重装。 有人可以帮我吗？

我的项目结构：

这是我的 webpack.dev.js 配置：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar = require("webpackbar");

module.exports = {

mode: "development",
entry: {
       index: path.resolve(__dirname, "./src/index.js"),
},

output: {                                    
    path: path.resolve(__dirname, "./dist"),  
    filename: "js/[name].js",                
},

devServer: {                           
    contentBase: path.join(__dirname, '/dist'),
    watchContentBase: true,
    compress: true,                    
    port: 9001,              
    inline: true,
    historyApiFallback: true,
    watchOptions: {
        poll: true,
        ignored: "/node_modules/"
    }
},

stats: {                              
    modules: false,
    entrypoints: false,
},

plugins: [
    new WebpackBar({}),                       
    new CleanWebpackPlugin({}),   
    new CopyPlugin({                           
        patterns: [
            { from: "src/static/img", to: "static/img" },          
            { from: "src/static/models", to: "static/models" },     
        ],
    }),
    new MiniCssExtractPlugin({                        
        filename: "css/[name].css",                    
    }),
    new HtmlWebpackPlugin({
        template: "./src/index.html",     
        filename: 'index.html',           
        inject: "body",                   
        chunks: ['index'],
    })
],

module: {
    rules: [
        {
            test: /\.(scss|css)$/,
            use: [
                { loader: MiniCssExtractPlugin.loader, options: {} },
                { loader: "css-loader", options: { url: false } },
                { loader: "postcss-loader", options: {} },
                { loader: "sass-loader", options: {} },
            ]
        },
    ],
},
}

这是我的脚本：

"live": "webpack serve --config webpack.dev.js",

运行脚本后收到的消息：

i ｢wds｣: Project is running at http://localhost:9001/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\isladjan\Desktop\RaD\dist
i ｢wds｣: 404s will fallback to /index.html
...
i ｢wdm｣: Compiled successfully.

我正在运行的版本：

node: v15.13.0
"webpack": "^5.24.4",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",

读数来自：http://localhost:9001/webpack-dev-server files which webpack-dev-server served