Assets use file-loader instead of url-loader (gatsbyjs#7061)

* Assets use file-loader instead of url-loader Fixes gatsbyjs#6963 * Just pdf files use file-loader
porfirioribeiro · Aug 20, 2018 · df3443e · df3443e
1 parent 034842d
commit df3443e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/gatsby/src/utils/webpack-utils.js b/packages/gatsby/src/utils/webpack-utils.js
@@ -238,7 +238,7 @@ module.exports = async ({
 
     file: (options = {}) => {
       return {
-        loader: require.resolve(`url-loader`),
+        loader: require.resolve(`file-loader`),
         options: {
           name: `${assetRelativeRoot}[name]-[hash].[ext]`,
           ...options,
@@ -350,12 +350,23 @@ module.exports = async ({
   }
 
   /**
-   * Loads audio, video, or pdf assets
+   * Loads audio and video and inlines them via a data URI if they are below
+   * the size threshold
+   */
+  rules.media = () => {
+    return {
+      use: [loaders.url()],
+      test: /\.(mp4|webm|wav|mp3|m4a|aac|oga|flac)$/,
+    }
+  }
+
+  /**
+   * Loads assets without inlining
    */
   rules.miscAssets = () => {
     return {
       use: [loaders.file()],
-      test: /\.(mp4|webm|wav|mp3|m4a|aac|oga|flac|pdf)$/,
+      test: /\.pdf$/,
     }
   }
 

diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -280,6 +280,7 @@ module.exports = async (
       rules.yaml(),
       rules.fonts(),
       rules.images(),
+      rules.media(),
       rules.miscAssets(),
     ]
     switch (stage) {