webpack-dev-server 保存时终端有信息提示更新，浏览器却没有刷新，需手动刷新，另外页面引入的js没有生效

Question

webpack-dev-server 保存时终端有信息提示更新，浏览器却没有刷新，需手动刷新，另外,css是有效果的，页面引入的js没有生效，查看打包文件代码都在，请大神指点

{
  "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: {
        // 先尝试 ts，tsx 后缀的 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'],
              // 只命中src目录里的js文件，加快 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',
};