Assets use file-loader instead of url-loader

[zauni]

Fixes #6963

[KyleAMathews]

Deploy preview for using-postcss-sass failed.

Built with commit 742b913

https://app.netlify.com/sites/using-postcss-sass/deploys/5b698275b13fb115bd788d68

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit 742b913

https://deploy-preview-7061--gatsbygram.netlify.com

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit f0f24fa

https://deploy-preview-7061--gatsbygram.netlify.com

[gatsbybot]

Deploy preview for using-drupal ready!

Built with commit 742b913

https://deploy-preview-7061--using-drupal.netlify.com

[KyleAMathews]

Deploy preview for gatsbyjs failed.

Built with commit 742b913

https://app.netlify.com/sites/gatsbyjs/deploys/5b698274b13fb115bd788d5c

[KyleAMathews]

Thanks for jumping on this!

We don't actually want to eliminate the use of url-loader altogether. Most asset types we do want to use the url-loader for smaller assets. It's just a few types like pdf (to start with, we can add others perhaps later) that we want to switch to always using file-loader.

[zauni]

How about something like this:

  /**
   * Loads audio and video and inlines them via a data URI if they are below
   * the size threshold
   */
  rules.audioVideo = () => {
    return {
      use: [loaders.url()],
      test: /\.(mp4|webm|wav|mp3|m4a|aac|oga|flac)$/,
    }
  }

  /**
   * Loads assets without inlining
   */
  rules.miscAssets = () => {
    return {
      use: [loaders.file()],
      test: /\.(pdf)$/,
    }
  }

[KyleAMathews]

Looks great! If @jquense is around, I'm sure he has thoughts too as he wrote this code.

[zauni]

Gatsby v1 loaded font files also with file-loader (link), whereas v2 loads it with the url-loader. Some additional insight would be nice 👍

This also reminds of this issue: facebook/create-react-app#3722

Like, it would be nice to let the user decide what he wants

import { url } from './image.png'; // file-loader
import image from './image.png'; // url-loader

But thats not solved yet :)

[KyleAMathews]

We think GraphQL is better for letting people specify transforms :-)

I think fonts are fine leaving w/ url-loader. We have url-loader setup to only inline assets < 10kb. If a font file is < 10kb then it's probably better to inline it to speed rendering.

PDFs are different as you never want it inlined as you really only want a link so you can offer it to someone to download if they'd like so inlining is almost always a waste.

[gatsbot]

Holy buckets, @zauni — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[KyleAMathews]

Thanks!

[zauni]

Thank you very much for your fast responses!

[KyleAMathews]

Thank you very much for fixing the problem!