1

我遵循本指南并编写类似该指南的代码。一切都好！但是当我更改import printMe from './print.js'为时import printMe from './print'，HMR 不会正确输出更改！

当我改变如下print.js：

   export default function printMe() {
 -   console.log('I get called from print.js!');
 +   console.log('Updating print.js...')
   }

控制台应该输出：正在更新 print.js...

但它输出：我从 print.js 中被调用！

当我再次将“更新 print.js ...”更改为“再次更新 print.js ...”时，它并没有改变。

以下是我的快照：

控制台输出

但是，模块分辨率说：

  • 如果路径具有文件扩展名，则该文件被直接捆绑。
  • 否则，使用 resolve.extensions 选项解析文件扩展名，该选项告诉解析器哪些扩展名（例如 - .js、.jsx）可用于解析。

和resolve-extensions还说：

自动解析某些扩展。这默认为：

extensions: [".js", ".json"]

所以，我的问题是：webpack 不能像上面所说的那样解析没有扩展名的路径吗？这是一个错误还是我做错了什么？我所做的只是更改import printMe from './print.js'为import printMe from './print'.

我的环境：

  • 节点 v7.4.0
  • npm 4.0.5
  • 网络包 3.4.1
  • 网络包开发服务器 2.6.1
  • macOS 塞拉利昂 10.12

非常感谢！！

4

1 回答 1

0

我想我知道它为什么不能正常工作。

我要做的是：

src/index.js

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

// ...

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

但是您应该始终使的名称import和第一个参数module.hot.accept相同：

src/index.js

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

// ...

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

或者：

src/index.js

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

// ...

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

这两种情况都有效。这可能是 webpack 作者的预期行为。但在我看来，这三种情况都应该有效。:(

于 2017-08-05T09:18:49.593 回答