Options for directory index files and file extensions

[moisadoru]

Currently there is no way to specify directory index files, and default file extensions. This is extremely useful when using the dev server in conjunction with es6 modules directly in the browser.

Let's say we have the following structure:

src
└── my-module
    ├── index.js
    ├── MyModule.js
    └── OtherThing.js

The index.js file acts as a public module api, and exports some symbols:

export { MyModule as default } from './MyModule';
export { OtherThing } from './OtherThing';

We also have configured our environment is such a way to be able to import the above module like this:

import MyModule from './my-module';
import { OtherThing } from './my-module';

If this runs inside the browser, it will fail, as the dev server does not know it needs to also look into the my-module folder for a directory index file, or to try some default file extensions when resolving the requested resources.

I have added this pull request which adds these capabilities to the dev server. #21

[thgh]

Thanks for taking the time to develop and document this feature.

However, there is a standardized way to load modules in ES:

import MyModule from './my-module/index.js'

These options add non-standardized (afaik) behaviour, so I'm not yet convinced if this is the way to go. How about writing a plugin that transforms the shortened imports to their respective filenames?

I tend to only accept new functionality that's available in https://webpack.js.org/configuration/dev-server/#devserver => I will add this to the readme

[moisadoru]

Yeah, I know what you mean, but this is just a use case for this feature, and even so, I believe a user should be able to load modules this way.

The es modules spec does not say anything about the module resolution mechanism. This does, however respect the node module resolution mechanism, which makes it easier to share code both on the server and on the client, for universal apps.

Also, maybe it's worth mentioning that other servers have similar config options: Apache has DirectoryIndex which can be used multiple times, nginx has the index option which accepts multiple index file names, and so on, but webpack-dev-server only has a devServer.index option which accepts a single string value which is the index filename to be used when requesting a directory.

Would it be acceptable to have a similar index config option that would accept a string, or an array of strings (this would be extra)?

[thgh]

OK, index with array value makes sense.

I would say the default value is index.html.
When given a string that starts with a dot, the string is appended to the filename. Otherwise, it's a new path segment. (which is more magic than ideal)

To reduce complexity, how about just a flag: nodeResolve: true?