的WebPack解決index.whatever.jsx自動

Question

使用的WebPack來解決我的進口：

/component/thing/index.jsx 
/component/stuff/index.jsx 

可以導入像

import Thing from './component/thing'; 
import Stuff from './component/stuff'; 

因爲index.jsx會自動解決。麻煩現在我的項目中有大量名爲index.jsx的文件，使得搜索文件變得困難和煩人。有沒有辦法配置webpack接受類似的東西：

/component/thing/thing.index.jsx 
/component/stuff/stuff.index.jsx 

但仍然允許速記像上面那樣導入？

---

我的第一反應是給（中的WebPack）：

resolve: { 
    extensions: ['.index.jsx'] 
} 

，但沒有解決。是否有可能做我正在尋找的東西？

Answer 1

這個resolver plugin可能會幫助你。

我還沒試過。但根據描述，你應該可以做這樣的事情。

resolve: { 
    plugins: [ 
    new DirectoryNamedWebpackPlugin({ 
     transformFn: function(dirName) { 
     // use this function to provide custom transforms of resolving directory name 
     // return desired filename or array of filenames which will be used 
     // one by one (honoring order) in attempts to resolve module 
     return [dirName + ".index", dirName + "/" + dirName + ".index"] 
     } 
    }) 
    ] 
} 

我不知道這transformFn的作品，這就是爲什麼我返回兩個可能的路徑作爲數組如何。做一些實驗，你將能夠找到正確的路徑返回你的情況。

此外，請確保您使用的是基於webpack版本的插件的correct version。

Answer 2

您是否必須使用文件夾/ index.js結構？你可以只是thing.js住在/component文件夾，那麼你可以的WebPack使用解決進口速記之類的東西，你有以上：

import Thing from 'component/thing'; 
import Stuff from 'component/stuff'; 

的的WebPack決心會是這個樣子：

resolve: { 
    modules: [__dirname, 'node_modules'], 
    extensions: ['.js'] 
}