Bright Bright - 26 days ago 9
Javascript Question

What does webpack file-loader do?

I'm learning to use webpack in recent days and I feel confused on webpack file-loader. As I know, we can use file loader to copy a file such as image, and customize or encode the name of the file and get a path returned. But I don't know why we need file-loader, what's the returned path used for? I think those things file-loader can do can also be easily done manually, am I wrong? I'm new to webpack, I've searched online and found nothing about it. Any help is appreciated, thanks in advance!

Answer

One thing that's handy about using file-loader is that you can generate file names that are "content hashed," meaning that the file name contains a hash based on the content of the file. This helps a lot in making sure that clients don't accidentally use older versions of the file due to browser or CDN caches. If you require the file to get its URL, therefore, none of the code has to change references to the new version of the file. See Filename template placeholders in the documentation for more information.

Additionally, anything loaded with file-loader gets included in the assets JSON output of webpack, so you can see all the assets in one place.

You're right that all this stuff can be done manually, but many find using webpack for things like this to be more convenient. YMMV.