Repository: next.js
Issue: Webpack 5 custom loaders messing with NextJs default loader for (.png and .gif files) 
Labels: bug,Image (next/image),Webpack,Module Resolution

### Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/relaxed-lewin-2cz5ks?file=%2Fpackage.json%3A11%2C39&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clz79fcac00063b6nksmxayw4%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clz79fcab00023b6nbwtt84fc%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clz79fcab00043b6n1b2nu3ve%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clz79fcab00053b6nlbfld0qo%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clz79fcab00023b6nbwtt84fc%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clz79fcaa00013b6nxtbm07xy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clz79gsai002c3b6nod9hsbbu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A11%252C%2522startColumn%2522%253A39%252C%2522endLineNumber%2522%253A11%252C%2522endColumn%2522%253A39%257D%255D%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clz79fcab00023b6nbwtt84fc%2522%252C%2522activeTabId%2522%253A%2522clz79gsai002c3b6nod9hsbbu%2522%257D%252C%2522clz79fcab00053b6nlbfld0qo%2522%253A%257B%2522id%2522%253A%2522clz79fcab00053b6nlbfld0qo%2522%252C%2522activeTabId%2522%253A%2522clz79m9ku00bn3b6n1pp6e6my%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clz79m9ku00bn3b6n1pp6e6my%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clz79fcab00043b6n1b2nu3ve%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clz79fcab00033b6nq54dccc2%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clz79fcab00043b6n1b2nu3ve%2522%252C%2522activeTabId%2522%253A%2522clz79fcab00033b6nq54dccc2%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

### To Reproduce

Here is my custom webpack rule for optimizing the images

```
webpack: (config, { isServer }) => {
    console.log('Custom Webpack config is being applied');
    
    config.module.rules.push({
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
        type: "asset/resource",
        generator: {
          filename: "static/[hash][ext][query]"
        }
      },);

    return config;
  },
```

But after running next-dev 
1. I am getting 2 images in the .next/static folder
2. One image is correct and is present in the .next/static/media folder
3. while the image which is present due to webpack config, Contains hash like 
`export default {"src":"/_next/static/media/car_image.4b526cd4.png","height":82,"width":104,"blurDataURL":"/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcar_image.4b526cd4.png&w=8&q=70","blurWidth":8,"blurHeight":6};`

Are there any issues with custom webpack loader config and NextJs deafult loader for static images ? 


### Current vs. Expected behavior

Ideally I should get the png rendered on screen
Moreover there are 2 images present in the static folder leading to duplicate asset pushing

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Mon Feb 19 19:43:41 PST 2024; root:xnu-8796.141.3.704.6~1/RELEASE_ARM64_T8103
    Binaries:
      Node: 14.21.3
      npm: 6.14.18
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.3.4
      eslint-config-next: 12.3.4
      react: 17.0.2
      react-dom: 17.0.2
```


### Which area(s) are affected? (Select all that apply)

Image (next/image), Module Resolution, Webpack

### Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

### Additional context

_No response_