CODEWITHSUNDEEP
regexwebpack
Zen-Ventzi-Marinov
Zen-Ventzi-Marinov

Reputation: 4236

Webpack require/import image without extension

I want to import/require an image that doesn't have an extension. Is this possible? For example currently I can import jsx files without writing the extension. What if I want to do the same for image files or other type of files that lack file extension?

E.g. require('./avatar.png') will work. What I want to work is require('./avatar')

Upvotes: 0

Views: 4620

Answers (1)

kingdaro
kingdaro

Reputation: 12028

I'd strongly advise against doing this, as writing the extension makes it more explict exactly what's being imported.

For example, if you had avatar.js, avatar.png and avatar.css in the same folder, is it easy to tell what import ... from './avatar' will give you? Having similarly-named files with different extensions is not an uncommon convention.

But, either way, you can add the extensions you want to resolve.extensions in the webpack config, like so. Try to be responsible with it.

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx', '.png', '.jpg', /* ... */]
  }
}

Upvotes: 4

Related Questions