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

非常感謝！

來源

2017-07-31 Sam Yang

我想我知道它爲什麼不正確工作。

我要做的就是：

的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作者的預期行爲。但從我的觀點來看，他們三種情況都應該起作用。 :(

來源

2017-08-05 09:18:49

Webpack導入沒有擴展輸出的文件在HMR（熱模塊更換）中的更改不正確

回答

相關問題