Loader: support files with multiple extensions

[iamakulov]

Right now, the loader option doesn’t support matching by multiple extensions. For example:

// index.js
import moduleAsText from "./module.raw.js"
console.log(moduleAsText)

# Shell
$ esbuild --bundle index.js --outfile=out.js --loader:.raw.js=text
error: Invalid file extension: ".raw.js"
1 error

Would it be possible to support this?

Practical use-case: for me, this is needed for interop with webpack.

A team I’m working with is trying to switch to ESBuild for development, keeping webpack in production. In the codebase, there’re a few cases where a .js file is being loaded with raw-loader. In webpack, it’s possible to match these files with test: /\.raw\.js$/ and apply the loader selectively; but ESBuild throws an error.

[evanw]

Yes, I've been planning to do this. A use case I have in mind for later is .css vs .module.css. The behavior that makes the most sense to me is for it to pick the loader with the longest match.

[anubra266]

@evanw I'm working on a project, where I'll like to import some of my .tsx components with the text loader in some cases. How could I go about this?

[iamakulov]

@anubra266 What I did in a similar case was renaming these files from something.tsx to something.raw.tsx and then assigning a text loader to the .raw.tsx extension:

esbuild --loader:.raw.tsx=text