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

问题描述：

我遵循此guide并编写类似该指南的代码。一切都好！但是当我将import printMe from './print.js'更改为时，HMR不会正确输出更改！Webpack导入没有扩展输出的文件在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'更改为。

我的环境：

节点V7.4.0
NPM 4.0.5
的WebPack 3.4.1
的WebPack-DEV-服务器2.6.1
MACOS塞拉利昂10.12

非常感谢！

答

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

我要做的就是：

的src /指数。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(); 
    }); 
}

OR：

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（热模块更换）中的更改不正确

相关推荐