WebPACKの複数のルートとダイナミックで、私はWebPACKの2つの根で構成している

Question

必要があります。私は名前require('moduleName')によってモジュールを必要とする場合

resolve: { 
    root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ] 
}, 

モジュールの決意は完璧に動作します。それはsiteNameフォルダーにあり、そこにモジュールが見つからない場合はcommonフォルダーにあります。

モジュールを動的に要求しようとすると、webpackはsiteName/Pagesのすべてのファイルをバンドルに追加しますが、common/Pagesフォルダのファイルは無視します。

私はrequire.contextを調べましたが、すべて両方のフォルダからのファイルを含むようになりました。次のようなファイル構造を考えると、まとめると

var req = require.context('../', true, /\/(siteName|common)\/Pages/); 
var page = req(pageModuleName); 

---

：WebPACKのはで設定するため

common/Pages/PageA.js 
common/Pages/PageB.js 
siteName/Pages/PageA.js 

を私は

require('Pages/' + pageModuleName); 

ような何かを行うときには、それが可能です追加する方法ちょうど

バンドルへ

siteName/Pages/PageA.js 
common/Pages/PageB.js 

と私はあなたが達成しようとしているものとは思わない

common/Pages/PageA.js 

Answer 1

を「無視」。それが効果的にteelsがrootとして./src/siteName/と./src/commonを使用するようにWebPACKのあなた

resolve: { 
    root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ] 
}, 

。したがって、両方のディレクトリに/pagesがある場合、最終的にパスが重複します。

//what you want     // what webpack see 
siteName/pages/PageA.js    pages/PageA.js 
siteName/pages/PageB.js  =>  pages/PageB.js 
common/pages/PageA.js     pages/PageA.js 
common/pages/PageB.js     pages/PageB.js 

だからあなたはあなたが少しを起草いいです

resolve: { 
    root: [ path.resolve('./src') ] 
},