url-loader filling files with base64

[MichaelJCole]

See this repo: https://github.com/MichaelJCole/webpack-file-loader

Notes in these files: https://github.com/MichaelJCole/webpack-file-loader/search?q=ISSUE_HERE&unscoped_q=ISSUE_HERE

Expected Behavior

    /* ISSUE_HERE (1/3)

    Hello!  And Welcome To The Internet!

    This is a [Quasar](http://quasar.dev) config file.
    This section extends web pack.

    Also included is [phaser.io](phaser.io) - a HTML game engine packaged in npm.
    To see the original problem, comment out the rest of this
    function and run `yarn && quasar dev`

    ```
    Error: Local data URIs are not supported: player
    ```

    This error happens because webpack made the file into a dataurl.
    Phaser wants to load resources over XHR, so would like URL instead.
    Phaser refuses to implement data urls in it's loader.

    The code below is my attempt to configure Quasar's webpack to process
    these files so they can be loaded in phaser via XHR
    */

Actual Behavior

    /* ISSUE_HERE (2/3)
    Webpack created these files (output in browser console)
    ```
    1b7d460ae0a1b62ad310366012bc4e20.png
    c5b05634518f62135bc6b754594d352c.png
    85b0e130bbe4ecce34b3ee50f6596906.png
    f36c557a87c9f3eb8a7e12c729e50d9a.png
    ```
    but the file contents are text:

    ```
    $ curl --insecure https://localhost:8080/1b7d460ae0a1b62ad310366012bc4e20.png
    module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAYAAABGOvOzAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYRAzcI6rMxggAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACuUlEQVR42u2cT2gTQRTGZ1Wo0qZIkAqhWC0ELWJBGlSK6EEUqSjiQcFS/6FFsaWgQtrQq2hAL1oQ/1Wk6kFEGhuLeggKYlDbWwWbhFxEGlsNGKu0B7te++3hLePsYqXfu33MzNvdX957OzO7G8u2bWVilmUZObBt2/LyeLr+Fqh5bgQw3wEsMs350olasf/U7mbQiwfui/50czgWixn5YwoQAGuAtzkfONkGunxyBok72kuqx9OakMlktPwxBQiANcAs560Dh1E3nAH9JdEJevnWi2J7ST00WmuEw2FGAAEQgI9rgUBbB+gfheKcuqBsNssIIAAC0KgBuvf9RPQ86G3nToP+/SYujndr/8kIIAACmFPzgNSnSTlnp6dB37uaEvu3RpvE9sqbeSWt3501KxQKMQIIgAD+3iylFORU/84q6LD32bjoYORuO+i6cLXWCSxsjGr1723eBfrx22Gx/76NDaCPP0oxAgiAAGbVAOf7Ac777O0tuMdWXYc5lS+MiQfYcTAC+sWDIbH/qcQrf3/xsiWMAAIgAGE/IH3lKHTYEFkD+kZ8EHRZRQXo+gjm/K0k5nSkFvcbVtbUYA2YwbVHT9d+0E1n+0APXm4B/X54FPSm9l7cj5j6xWeDBEAAGvsBTnv6YVSca+dzOdAX+l7i+O51oAtfv4G+NoBz+0Pb68XzeTf0kRFAAATg4X6A2zzAuX5fuywAetXSctCbg0HQr4v4LDGZK/h6gXxPkClAAN7OA/w2r78fYAQQAAHINcDt2ZvTPvd3ig6f3EmD/j42Afr6pSNaOe1WE3RrBiOAAAhAngfo1oRj8STo5+kR8YAtao84nhFAAATwf60FxoslX8ebfkPECCAAApBTzO3/A5w5uH71CmivClaK453zAtPxrAFMAQL4tzVA13TXFrr+GAEEQABG9gfGHunDQfvhPQAAAABJRU5ErkJggg=="%
    ```

    Even when "built" to files
    ```
    $ quasar build
    $ cat test/dist/spa/1b7d460ae0a1b62ad310366012bc4e20.png)

    module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAYAAABGOvOzAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYRAzcI6rMxggAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACuUlEQVR42u2cT2gTQRTGZ1Wo0qZIkAqhWC0ELWJBGlSK6EEUqSjiQcFS/6FFsaWgQtrQq2hAL1oQ/1Wk6kFEGhuLeggKYlDbWwWbhFxEGlsNGKu0B7te++3hLePsYqXfu33MzNvdX957OzO7G8u2bWVilmUZObBt2/LyeLr+Fqh5bgQw3wEsMs350olasf/U7mbQiwfui/50czgWixn5YwoQAGuAtzkfONkGunxyBok72kuqx9OakMlktPwxBQiANcAs560Dh1E3nAH9JdEJevnWi2J7ST00WmuEw2FGAAEQgI9rgUBbB+gfheKcuqBsNssIIAAC0KgBuvf9RPQ86G3nToP+/SYujndr/8kIIAACmFPzgNSnSTlnp6dB37uaEvu3RpvE9sqbeSWt3501KxQKMQIIgAD+3iylFORU/84q6LD32bjoYORuO+i6cLXWCSxsjGr1723eBfrx22Gx/76NDaCPP0oxAgiAAGbVAOf7Ac777O0tuMdWXYc5lS+MiQfYcTAC+sWDIbH/qcQrf3/xsiWMAAIgAGE/IH3lKHTYEFkD+kZ8EHRZRQXo+gjm/K0k5nSkFvcbVtbUYA2YwbVHT9d+0E1n+0APXm4B/X54FPSm9l7cj5j6xWeDBEAAGvsBTnv6YVSca+dzOdAX+l7i+O51oAtfv4G+NoBz+0Pb68XzeTf0kRFAAATg4X6A2zzAuX5fuywAetXSctCbg0HQr4v4LDGZK/h6gXxPkClAAN7OA/w2r78fYAQQAAHINcDt2ZvTPvd3ig6f3EmD/j42Afr6pSNaOe1WE3RrBiOAAAhAngfo1oRj8STo5+kR8YAtao84nhFAAATwf60FxoslX8ebfkPECCAAApBTzO3/A5w5uH71CmivClaK453zAtPxrAFMAQL4tzVA13TXFrr+GAEEQABG9gfGHunDQfvhPQAAAABJRU5ErkJggg=="%
    ```

    Which is a long long way to go to get the wrong thing :-)
    */

Code

This is cfg.modules.rules

{ test: /\.vue$/,
  use: [ { loader: 'vue-loader', options: [Object] } ] }
{ test: /\.jsx?$/,
  exclude: [ [Function] ],
  use: [ { loader: 'babel-loader', options: [Object] } ] }
{ include: /src\/games/,
  test: [ /\.vert$/i, /\.frag$/i ],
  use: 'raw-loader' }
{ include: /src\/games/,
  test: /\.(gif|png|jpe?g|svg|xml|mp3)$/i,
  use: 'file-loader' }
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [ { loader: 'url-loader', options: [Object] } ] }
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  use: [ { loader: 'url-loader', options: [Object] } ] }
{ test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  use: [ { loader: 'url-loader', options: [Object] } ] }
{ test: /\.css$/,
  oneOf: 
   [ { resourceQuery: /module/, use: [Array] },
     { test: /\.module\.\w+$/, use: [Array] },
     { use: [Array] } ] }
{ test: /\.styl(us)?$/,
  oneOf: 
   [ { resourceQuery: /module/, use: [Array] },
     { test: /\.module\.\w+$/, use: [Array] },
     { use: [Array] } ] }
{ test: /\.scss$/,
  oneOf: 
   [ { resourceQuery: /module/, use: [Array] },
     { test: /\.module\.\w+$/, use: [Array] },
     { use: [Array] } ] }
{ test: /\.sass$/,
  oneOf: 
   [ { resourceQuery: /module/, use: [Array] },
     { test: /\.module\.\w+$/, use: [Array] },
     { use: [Array] } ] }
{ test: /\.less$/,
  oneOf: 
   [ { resourceQuery: /module/, use: [Array] },
     { test: /\.module\.\w+$/, use: [Array] },
     { use: [Array] } ] }
{ enforce: 'pre',
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  exclude: /node_modules/,
  options: { formatter: [Function] } }

How Do We Reproduce?

See this repo: https://github.com/MichaelJCole/webpack-file-loader

Notes in these files: https://github.com/MichaelJCole/webpack-file-loader/search?q=ISSUE_HERE&unscoped_q=ISSUE_HERE

[MichaelJCole]

I figured out a working setup on my end and I am not sure this is a bug after all.

My solution was to use this in quasar.conf.js:

      extendWebpack (cfg) {

        // eslint errors in browser(?)
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        })

        // phaser wants files as URL's for XHR requests.  refuses to load data urls

        // exclude phaser assets from existing rules
        cfg.module.rules.forEach(rule => {
          try {
            if (rule.use[0].loader === 'url-loader') {
              rule.exclude = /src\/phaser/
            }
          } catch (e) {}
        })
        // Add rules for phaser assets
        cfg.module.rules.push({
          include: /src\/phaser/,
          test: [/\.vert$/i, /\.frag$/i],
          use: 'raw-loader'
        },
        {
          include: /src\/phaser/,
          test: /\.(gif|png|jpe?g|svg|xml|mp3|svg|woff|woff2)$/i,
          use: 'file-loader'
        }
        )
      }
    },