在工程目录下新建 server.js, 目录如下所示

修改index.js

import "../css/a.css"
import "../css/b.css"
import print from './print'

console.log("--- load css ---");

print() 
function add(x, y ){
    return x + y;
}

console.log(add(1,3));

// 一旦 module.hot为true,默认开启了HMR功能，，以HMR功能代码生效
if( module.hot){
    module.hot.accept("./print.js", function(){
        // 方法会监听print.js文件的变化，一旦发生变化，其他模块不会重新打包构建
        // 会执行后面的回调函数
        print()
    });
}


function sum(... args){
    return args.reduce( (p,c) => p+c, 0);
}

console.log( sum(1,2,3 ));

1 启动服务器

node server.js

访问 http://127.0.0.1:3000

2 修改 webpack.config.js

/*
   HMR : hot module replacement 热模块替换 / 模块热替换
    作用 ： 一个模块发生变化，只会重新打包这一个模块，而不是打包所有的模块
    极大提升代码构建速度

    css文件： 可以使用HMR功能
    js 文件： 默认不适用HMR功能, 需要修改js代码，添加支持HMR功能代码
    html 文件 ： 默认不适用HMR功能, 同时会导致问题 html没有热更新
      
 */

//引用Node.js中的path模块，处理文件路径的小工具
const path = require("path");
//引入插件
const HtmlwebpackPlugin = require("html-webpack-plugin")

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: "development" ,
    //入口
     //入口模块文件路径
    entry:  "./src/js/index.js"  ,
    //出口是对象
    output: {
        //path是一个绝对路径，__dirname 是当前js的绝对路径
        path: path.join(__dirname , "./dist/"), //打包的结果文件存储目录
        filename : "bundle[hash:10].js"  //打包的结果文件名
    },module:{ //模块
          rules: [  // 规则
            {
               //以下loader只会匹配一个  
                oneOf: [
                    {
                        test  : /\.css$/ , //正则表达式，匹配 .css 文件资源
                        use: [
                            "style-loader",
                            "css-loader"
                        ]
                     }  ,
                     {
                        test  : /\.(png|svg|jpg|gif)$/ , //正则表达式，匹配 .css 文件资源
                        use: [
                            "file-loader"                    
                        ]
                     }   
                ]
            }            
          ]
    },
    //配置插件
    plugins: [
        new HtmlwebpackPlugin({
            //此插件作用是将 index.html打包到bundle.js所在目录中
            //同时会在 index.html中自动的在<script>引入 bundle.js
            template : "./src/index.html"
        })
    ] ,
    // 实时重新加载
    devServer: {
        contentBase: "./dist" ,
        compress: true,
        port: 8888,
        open: true,
        //开启HMR功能 ，修改 webpack.config.js配置，需要重新启动服务 ctrl +C 停止服务
        hot: true  
    },devtool: "source-map"
}

/**
 source-map 一种提供源代码到构建后代码的映射技术
     inline-source-map   内联
        1. 只生成一个source-map
     hidden-source-map   外部
     eval-source-map
        每一个都生成对应的source-map

 */

修改输出口的hash值

然后在修改js,css文件，在重新执行npm run build,在访问 http://127.0.0.1:3000查看访问效果，已经发生了变化。