Why does webpack need an empty extension

Question

I'm trying to figure out why webpack requires this empty extension.

Inside resolve.extensions there's always this kind of configuration:

extensions: ['', '.js', '.jsx']

Why can't it be just this:

extensions: ['.js', '.jsx']

Answer 1

In a newer Webpack Version you can't use an empty string. It says:

Getting error: configuration.resolve.extensions[0] should not be empty.

You have to use extensions: ['.js', '.jsx'] or extensions: ['*', '.js', '.jsx'].

Issue: https://github.com/webpack/webpack/issues/3043

Answer 2

From the documentation:

Setting this option will override the default, meaning that webpack will no longer try to resolve modules using the default extensions. If you want modules that were required with their extension (e.g. require('./somefile.ext')) to be properly resolved, you must include an empty string in your array. Similarly, if you want modules that were required without extensions (e.g. require('underscore')) to be resolved to files with “.js” extensions, you must include ".js" in your array.

In other words, if you didn't include the empty string and required a module as ./foo.js, webpack would look for ./foo.js.js and ./foo.js.jsx instead.