内容不会使用HotModuleReplacementPlugin更改

Question

第一个问题：

尝试使用此链接中的webpack文档中提供的HMR示例：https://webpack.js.org/guides/hot-module-replacement/。如标题中所述：＆＃34; Gotchas＆＃34;，我尝试删除第一次加载app时添加的子项，然后我再次尝试调用component()函数追加由更改的print.js模块触发的新元素返回。

在浏览器中，当我更改print.js中的文字时，我会得到这个，这似乎有效，但当我按下按钮时，我会在print.js

中继续获取旧文本值

浏览器控制台屏幕显示print.js中的更改：

当我点击点击我并检查控制台按钮时屏幕截图（它不是我更新的文本，它的旧文本）：

我的输入文件main.js：

import _ from 'lodash';
import printMe from './print.js';

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;
}

let element = component(); // Store the element to re-render on print.js changes
document.body.appendChild(element);

if (module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    document.body.removeChild(element);
    element = component(); // Re-render the "component" to update the click handler
    document.body.appendChild(element);
  });
}

我的Print.js文件：

export default function printMe() {
  console.log('Updating123 and print.js...');
}

第二个问题：

我简化了以前的问题，从print.js返回简单文本，并在module.hot中控制了记录的文本，发现了甚至奇怪的行为：

从component()回调函数触发的

module.hot.accept函数在print.js内第一次更改时记录相同的旧文本（简单text4是print.js中更改完成之前的文本）

[WDS] App updated. Recompiling...
client?81da:223 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
main.jsx:14 Accepting the updated printMe module!
main.jsx:15 <div>​simple text4​</div>​
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/print.js
log.js:24 [HMR] App is up to date.

＆安培;在print.js内更改第二次不会在浏览器控制台中记录任何内容：

[WDS] App updated. Recompiling...
client?81da:223 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/print.js
log.js:24 [HMR] App is up to date.

main.js代码：

import printMe from './print.js';

function component() {
  var element = document.createElement('div');
  element.innerHTML = printMe();

  return element;
}

document.body.appendChild(component());

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

print.js代码：

export default function printMe() {
  var a = 'simple text2';
  return a;
}

Answer 1

.babelrc中的禁用模块转换终于奏效了。这条线就行了：“modules”：false

我当前的.babelrc文件如下所示：

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "chrome": 52
        },
        "modules": false,
        "loose": true
      }
    ]
  ],
  "plugins": ["transform-object-rest-spread"]
}