when webpack-dev-server is saved, the terminal has a message to update, but the browser does not refresh, so it needs to be refreshed manually. In addition, css is effective, and the js introduced on the page does not take effect. Check the packaged file code. Please give me some advice

{
  "name": "new_react1",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --progress --display-modules --colors --display-reasons",
    "hot": "webpack-dev-server --open --port 3000 --devtool source-map --inline --content-base dist --mode development",
    "build": "webpack --mode production --progress --display-modules --colors --display-reasons"
  },
  "author": "zjp",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.3.1",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.5",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "web-webpack-plugin": "^4.1.0",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}

webpack.config.js

const path = require("path");
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { AutoWebPlugin } = require("web-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
// const NamedModulesPlugin = require("webpack/lib/NamedModulesPlugin");
// const HotModuleReplacementPlugin = require("webpack/lib/HotModuleReplacementPlugin");
const autoWebPlugin = new AutoWebPlugin("./src/pages", {
    template: "./src/template.html",
    //postEntrys: ["./src/aa.css"]//  CSS 
});

module.exports = {
    // mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js",
        publicPath:"/public/",
         //  Source Map 
        // sourceMapFilename: "[file].map",
        // 
        devtoolModuleFilenameTemplate: "zjp"
    },
    entry: autoWebPlugin.entry({
        base: "./src/base.js",
        
    }),
    optimization: {
        runtimeChunk: {
            name: "runtime",
        },
        splitChunks: {
            minSize: 0,
            cacheGroups: {
                base: {
                    chunks: "all",
                    name: "base",
                    test: "base",
                },
                common: {
                    chunks: "all",
                    name: "common",
                    minChunks: 2,
                },
            
            },
        },
    },
    resolve: {
        //  tstsx  TypeScript 
        extensions: [".js", ".json", ".jsx", ".css"],
        modules:["./src/", "./node_modules"]
    },
    module: {
        rules: [
            {
              //  JavaScript 
              test: /\.(js|jsx|mjs)$/,
              
              enforce: "pre",
  
              //  babel-loader  JavaScript 
              // ?cacheDirectory  babel-loader  babel 
              // use: ["babel-loader"],
              use:["babel-loader"],
              // srcjs Webpack 
              include: path.resolve(__dirname, "./src"),
              exclude:[
                  path.resolve(__dirname, "./node_modules"),
            
              ]
            },
            {
              //  SCSS 
              test: /\.(less|css)$/,
        
              // use: [
              //     "style-loader",
              //     "css-loader",
              //     "postcss-loader",
              //     "less-loader",
              // ],
              loader: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "less-loader"],
              //  node_modules 
              include: path.resolve(__dirname, "./src"),
  
              exclude: path.resolve(__dirname, "./node_modules"),
            },
            {
              //  file-loader 
              test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
              use: [{
                  loader: "url-loader",
                  options: {
                    // 30KB  url-loader
                    limit: 1024 * 30,
                    //  file-loader file-loader 
                    fallback: "file-loader",
                     query: {
                          
                          name: "images/[name].[ext]",
                      }
  
                  }
              }],
              include: path.resolve(__dirname, "./src"),
              exclude:[
                  path.resolve(__dirname, "./node_modules"),
            
              ]
  
            },
          ],
          //noParse: /jquery|chartjs/,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        }),
        new CleanWebpackPlugin(
            ["dist"]
        ),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        autoWebPlugin,
    ],
     devServer:{
        // proxy: { // 
        //     "/api": "http://localhost:3000"
        // },
        //contentBase: path.join(__dirname, "public"), //  DevServer HTTP 
        contentBase: path.resolve(__dirname),
        host:"0.0.0.0",
        // port:"8080",
        publicPath: "/public/",
        // compress: true, //  gzip 
        inline:true,
        // hot:true,
        // open:true,
        // hot:true,
        // historyApiFallback: {
        //     // 
        //     rewrites: [
        //       // /user  user.html
        //       { from: /^\/user/, to: "../src/pages/user/index.js" },
        //       { from: /^\/app/, to: "../src/pages/index/index.js" },
        //       //  index.html
        //       { from: /./, to: "../src/pages/index/index.js" },
        //     ]
        // }
    },
    // Source Map 
    devtool: "cheap-module-eval-source-map",
};