没有扩展名的 Webpack 导入文件在 HMR（热模块替换）中输出更改不正确

Question

我遵循此 guide 并按照该指南编写代码。一切都好！但是当我将 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!

的电话

当我第二次将 'Updating print.js...' 更改为 'Updating print.js again...' 时，它并没有发生变化。

以下是我的截图：

然而，Module Resolution 表示：

If the path has a file extension, then the file is bundled straightaway.

Otherwise, the file extension is resolved using the resolve.extensions option, which tells the resolver which extensions (eg - .js, .jsx) are acceptable for resolution.

和resolve-extensions也说：

Automatically resolve certain extensions. This defaults to:
extensions: [".js", ".json"]

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

我的环境：

节点 v7.4.0
npm 4.0.5
网络包 3.4.1
webpack-dev-server 2.6.1
macOS 塞拉利昂 10.12

非常感谢！！

Answer 1

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

我做的是：

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 作者的预期行为。但从我的角度来看，这三种情况都应该有效。 :(

没有扩展名的 Webpack 导入文件在 HMR（热模块替换）中输出更改不正确

Webpack importing files without extension outputs changes incorrectly in HMR(Hot Module Replacement)

javascript

webpack

webpack-dev-server

webpack-hmr

hot-module-replacement