if (module.hot) {

// 
module.hot.accept();

}

if (module.hot) {

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

}

what"s the difference between the two, and why the page has different results during hot loading. Here is my page code
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();
})

}

the result of page update after using the first method is

appendDOM