Order of rules matters when using url-loader and file-loader

[michaelprescott]

Documentation Is:

• [ ] Missing
• [x] Needed
• [ ] Confusing
• [ ] Not Sure?

Please Explain in Detail...

I've been wrestling with an issue and crawling the web for hours. I was in the process of documenting it as a bug when I discovered how to solve it.

I have file-loader and url-loader both configured to handle test: /\.(png|jpe?g|gif)$/I,, and url-loader has its limit set to 10KB. url-loader works fine, but when images exceed the limit the file-loader picks them up as expected; however, it seems to ignore the configuration for how to name and output the images. For each image, file-loader creates 2 files. For example: Input: src/my-path/image1.gif Output-1: dist/my-path/image1.gif, but it's not really a gif. Instead, it contains module.exports=afjhwheiueruiweroug.gif Output-2: dist/afjhwheiueruiweroug.gif, which is the actual image

The problem: I had file-loader configured first followed by the url-loader configuration in my webpack config. The solution: Set the url-loader rule before the file-loader rule. In the correct order, images are output to the configured paths as expected, file name configuration is respected, and image files are actually image files instead of modules that reference image files.

Your Proposal for Changes

Make note that file-loader probably needs to be configured after url-loader.

[alexander-akait]

Order of rules is not matters, please provide minimum reproducible test repo, looks you have invalid configuration

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!