如何使用的WebPack目錄導入文件解決

Question

我試圖做到這一點：

文件結構

/app 
/app/components 
/app/containers 
/app/reducers 
/app/actions 

我希望能夠在任何文件中/app做進口這樣

import {ComponentA} from 'components' 

，而不必有一個index.js在每個含有像這樣的文件夾：

應用程序/組件/ index.js

export * from './ComponentA' 
export * from './ComponentB' 

我在想我能做到這一點使用webpack resolve，但我無法搞清楚如何做這正確的方法。有任何想法嗎？

Answer 1

您需要require.context： https://webpack.github.io/docs/context.html

例如需要的一切，包括在 「任務」 文件夾中的子目錄： require.context（ 「./模塊/任務/」，真實，/.*/ ）;

Answer 2

我相信你應該使用root和modulesDirectories的resolve屬性的參數組合。隨着第一，你必須建立新的模塊樹的根，因爲它是來得光彩啦在文檔的例子：

var path = require('path'); 

// ... 
resolve: { 
    root: [ 
    path 
    ] 
} 

，如果需要它，你就可以使用在應用子文件夾的具體名單文件夾導入從他們只做如下：

resolve: { 
    modulesDirectories: [ 'node_modules', 'app' ] 
} 

的第一個參數是需要允許從原來node_modules進口文件夾。

然後你可以導入如下：

import ComponentA from 'components'; 

但要確保組件和其他同級的文件夾有類似node_modules結構像node_modules /包裝/ lib中/模塊app/components/lib/ComponentA包含package.json與files部分的根部。