拡張出力のないファイルをインポートするWebpackは、HMR（ホットモジュール置換）で正しく変更されません

Question

私はこれに続きguideとそのガイドのようなコードを書いています。全て大丈夫！しかし、import printMe from './print.js'をに変更すると、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 ...」を「print.jsをもう一度更新しています...」に変更すると、変更されません。

次は私のスナップショットです：

しかし、Module Resolutionは言う：

• パスは、ファイルの拡張子を持っている場合は、そのファイルが同梱straightawayです。
• それ以外の場合、ファイル拡張子は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

ありがとうございます！

Answer 1

私はそれがなぜ正しく動作しないのか知っていると思います。私は何

は次のとおりです。

の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の作者の期待される動作かもしれません。しかし、私の見解から、彼らは3つの状況すべてがうまくいったはずです。 :(