webpack热加载问题。module.hot.accept()api的意思

Question

if (module.hot) {

// 实现热更新
module.hot.accept();

}

if (module.hot) {

module.hot.accept('./print.js', function() {
  console.log('Accepting the updated printMe module!');
  printMe();
})

}

这两个又什么区别 ，为什么在热加载过程中页面有不同的结果。下面是我的页面代码
import _ from 'lodash'
import printMe from './print'
function component(){

var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and  check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;

}
document.body.appendChild(component())

if (module.hot) {

// 实现热更新
module.hot.accept();

}

if (module.hot) {

module.hot.accept('./print.js', function() {
  console.log('Accepting the updated printMe module!');
  printMe();
})

}

当使用第一种方法后页面更新后的结果是这样的

第二种方法每次回正确的显示 而不是每次更新保存后都重新append了一个DOM

Answer 1

当你使用了module.hot.accept后，热更新只会更新对应的模块，并不会刷新整个页面。

Answer 2

module.hot.accept() 接收两个参数 第一个是依赖，第二个是回调，
1、如果不传参数，会重新执行js一遍，所以多一行你的元素。
2、传了依赖，只会执行依赖对应的回调， 就是如下函数体

console.log('Accepting the updated printMe module!');
  printMe();

3、if (module.hot) {} 里面都不写， 就是页面刷新。