webpack-dev-server配置热更新(HMR)

// webpack.config.js
#只需要设置hot:true
devServer: {
        contentBase: './dist',
        hot: true
},

//inde.js 让js能够进行热更新

import '@/assets/css/index.css';
//导入两个函数进来 注意了 如果是入口文件的js被改动 那只能全部重新编译
import p from './print';
import d from './dev';

console.log('index.js重新加载了');
p();
d();

//全局查找module模块 如果 devServer的值没设置 那就是undefined
if (module.hot) {
    // 这个地方第一个参数是要监听的文件,第二参数是回调 回调的参数是告诉你被修改了的文件名
	module.hot.accept(['./print', './dev'], (e) => {
		e.forEach((item) => {
			switch (item) {
			case './src/dev.js':
				d();
				break;
			case './src/print.js':
				p();
				break;
			default:
				break;
			}
		});
	});
}

//让css热更新
#webpack5 使用 mini-css-extract-plugin 或 style-loader
#webpack4 使用 style-loader

//webpack.config.js 开启HMR 会导致html更改完成后不会自动刷新 修改入口文件
entry: ['./src/index.js', './src/index.html'],