Import from folder ES6

Question

I'm studying JS and I have something like this.

//all inside folder reducers

//reducer1.js
export default reducer1

//reducer2.js
export default reducer2

//index.js
import reducer1 from './reducer1'
import reducer2 from './reducer2'
//then combine reducer
export default index

//outside folder reducers
import reducer from './reducers'

since ./reducers is just a folder and there is 3 file with 3 export default inside, I don't understand how this could work ? How does it know which export default in the folder will be imported ?

Thank you.

Answer 1

With Webpack, when you import a folder, the module loader will import the index.js inside the folder. You are exporting index in index.js, so you are importing it when you do import reducer from './reducers' . Importing a folder is just a shorthand for import reducer from reducers/index . With mean both import statements are equivalent.

To sums up, import reducer from './reducers' is the same as import reducer from reducers/index .