動的反応ホットリロードすべてのjsファイル

Question

ファイルを1つずつ追加することなくすべての反応コンポーネントをホットリロードしたいと思います。

module.hot.accept(['react/a', 'react/b', 'react/c'], function(){}) 

私のプロジェクトでは、すべてのjsファイルをホットリロードするためにrequire.contextを使用しています。

'user strict'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import A from 'a' 

ReactDOM.render(<A/>, document.getElementById('hello')) 
var context = require.context("react", true, /\.js$/); 
if (module.hot) { 
    module.hot.accept(context.id, function() { 
    var reloadedContext = require.context("react", true, /\.js$/); 
    ReactDOM.render(<A/>, document.getElementById('hello')) 
    }); 
} 

が、私は「A」からAを輸入しているため、ファイルa.jsは、もはやホットリロードではありません。ファイルb.jsとc.jsはホットリロード可能なままです。

どのようにrequire.contextが動作するのかわかりません。なぜ、インポートされたファイルがホットリロードできないのですか。

私のプロジェクトの例ですが、私の問題をフォークして複製することができます。いくつかアドバイスをくれてありがとう！

https://github.com/flik930/webpack-hot-module-reload-with-context-example

Answer 1

私はあなたのレポをクローニングして、あなたのアプリを試してみましたが、私は、ブラウザを更新し、コンポーネントAのテキストを変更し、ファイルを保存したときに私のために、ホットリロードはすなわち、正常に動作しています。あなたのマシンで何が起こっているのか分かりません。再試行しますか？

EDIT：ページが実際にホットモジュールのリロードの目的に反した変更時に...動作しているようです

ソリューションは以下のように、再びコンポーネントをロードするためにrequire.contextを使用することですリロードします：あなたは（おそらく反応/ index.jsまたはコンポーネント/ index.jsモジュールで）インポートが透明になるように、別のモジュールに

参照し、この複雑さを隠したいと思いますしかし

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const context = require.context("react", true, /\.js$/); 
const requireA = context => context(context.keys().find(key => key.match(/\/a\.js$/))).default 
let A = requireA(context) 

ReactDOM.render(<A/>, document.getElementById('hello')) 
if (module.hot) { 
    module.hot.accept(context.id, function() { 
    const reloadedContext = require.context("react", true, /\.js$/); 
    A = requireA(reloadedContext) 
    ReactDOM.render(<A/>, document.getElementById('hello')) 
    }); 
} 

そのような技法の例についてのReact ARCプロジェクトたとえば、このファイルでは、次のような手法を使用しています。 https://github.com/diegohaz/arc/blob/master/src/components/index.js