没有扩展输出的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调用！

当我将'正在更新print.js ...'更改为'再次更新print.js ...'时，它不会更改。

以下是我的快照：

但是，Module Resolution说：

  

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

和resolve-extensions也说：

  

自动解决某些扩展程序。默认为：

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

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

我的环境：

• node v7.4.0
• npm 4.0.5
• webpack 3.4.1
• webpack-dev-server 2.6.1
• macOS Sierra 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作者的预期行为。但从我的观点来看，他们有三种情况都应该有效。 ：（