esbuild icon indicating copy to clipboard operation
esbuild copied to clipboard

Destination path for the file loader for specific extensions

Open dalcib opened this issue 5 years ago • 9 comments

The file loader works well, but all files are placed in the same folder of the bundled js or outdir. With it, css, images, fonts, etc are put all together. It gets complicated in large projects with lots of files. It would be nice if there was an option, like filepath, where would be possible to set a destination path for an extension used by the file loader. For example:

esbuild --bundle ./src/index.js --outfile=./public/js/bundle.js loader:.ttf=file  filepath:.ttf=./public/fonts 

dalcib avatar Sep 02 '20 11:09 dalcib

This seems like a special-enough case that some form of plugin or custom logic is probably more appropriate. I will think about how to handle this as a plugin. People probably have all kinds of custom requirements for output directory structures that don't necessarily map to file extensions.

evanw avatar Sep 03 '20 06:09 evanw

I don't think this is just something that is a nice to have. It's actually a problem when a file of the same name exists, but in a different directory...

- /app/images/avatar.png
- /app/images/user/avatar.png

The above two image share the same file name, but reside in different directories.

When built, they end up being given the same name (eg. avatar.JGBRM5DO.png) and placed in the same directory. Resulting in only one file. Yet they are different files and should both be available.

Ideally, the directory structure should be maintained, just like JS and CSS files are.

Is there a reason why the file loader doesn't respect the outbase and outdir options? Can a plugin determine where a file is written to?

joelmoss avatar Feb 15 '21 22:02 joelmoss

Ah sorry, just realised that you add a hash based on the file contents - I was testing this with an identical file, but in different directories.

So this is less of an issue. However, it would be great if the file loader did maintain the input directory structure.

joelmoss avatar Feb 15 '21 23:02 joelmoss

I think this case can now be handled with a plugin.

dalcib avatar Feb 16 '21 06:02 dalcib

I checked the documentation and didn't find any clue where to specify the output directory for the file according to the extension, is this really possible at the moment?

norman784 avatar Feb 22 '21 19:02 norman784

I tried to implement it with a plugin. But with the current API, it is not possible. I am reopening the issue.

dalcib avatar Feb 22 '21 19:02 dalcib

No worries. I plan to extend the plugin API to implement this. I already have it working in one of my branches that contains a rewrite of the linker.

evanw avatar Feb 23 '21 06:02 evanw

Hello! any news on this? Thanks in advance

BrunoViera avatar Mar 06 '22 16:03 BrunoViera

In case it’s helpful: you can do something like this using --asset-names= and [ext]: https://esbuild.github.io/api/#asset-names

evanw avatar Jul 26 '22 12:07 evanw