add feature to preload fonts

Author: laysent

README.md

@@ -72,8 +72,9 @@ plugins: [
 ```
 
 When preloading files, the plugin will use different `as` attribute depends on the type of each
-file. For each file ends with `.css`, the plugin will preload it with `as=style`, while for all
-other files, `as=script` will be used.
+file. For each file ends with `.css`, the plugin will preload it with `as=style`, for each file ends
+with `.woff`, `.woff2`, `.eot`, `.otf` or `.ttf`, the plugin will preload it with `as=font`, while
+for all other files, `as=script` will be used.
 
 If you do not prefer to determine `as` attribute depends on suffix of filename, you can also
 explicitly name it using `as`:
@@ -106,6 +107,9 @@ plugins: [
 ]
 ```
 
+Notice that if `as=font` is used in preload, crossorigin will be added, otherwise the font resource
+might be double fetched. Explains can be found in [this article](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf).
+
 By default, the plugin will assume async script chunks will be preloaded. This is the equivalent of:
 
 ```js

index.js

@@ -75,13 +75,16 @@ class PreloadPlugin {
             // value depends on suffix of filename. Otherwise use the given `as` value.
             let asValue;
             if (!options.as) {
-              asValue = entry.match(/\.css$/) ? 'style' : 'script';
+              if (entry.match(/\.css$/)) asValue = 'style';
+              else if (entry.match(/\.(?:eot|otf|ttf|woff2?)$/)) asValue = 'font';
+              else asValue = 'script';
             } else if (typeof options.as === 'function') {
               asValue = options.as(entry);
             } else {
               asValue = options.as;
             }
-            filesToInclude+= `<link rel="${options.rel}" as="${asValue}" href="${entry}">\n`;
+            const crossOrigin = asValue === 'font' ? 'crossorigin="crossorigin" ' : '';
+            filesToInclude+= `<link rel="${options.rel}" as="${asValue}" ${crossOrigin}href="${entry}">\n`;
           } else {
             // If preload isn't specified, the only other valid entry is prefetch here
             // You could specify preconnect but as we're dealing with direct paths to resources

test/spec.js

@@ -191,6 +191,35 @@ describe('PreloadPlugin preloads normal chunks', function() {
     compiler.outputFileSystem = new MemoryFileSystem();
   });
 
+  it('adds preload using "font" for fonts and add crossorigin attribute', (done) => {
+    const compiler = webpack({
+      entry: {
+        js: path.join(__dirname, 'fixtures', 'file.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'bundle.js',
+        chunkFilename: 'chunk.[chunkhash].woff2',
+        publicPath: '/',
+      },
+      plugins: [
+        new HtmlWebpackPlugin(),
+        new PreloadPlugin({
+          rel: 'preload',
+          include: 'all'
+        })
+      ]
+    }, function(err, result) {
+      expect(err).toBeFalsy();
+      expect(JSON.stringify(result.compilation.errors)).toBe('[]');
+      const html = result.compilation.assets['index.html'].source();
+      expect(html).toContain('<link rel="preload" as="font" crossorigin="crossorigin" href="/chunk');
+      expect(html).toContain('<link rel="preload" as="script" href="/bundle.js"');
+      done();
+    });
+    compiler.outputFileSystem = new MemoryFileSystem();
+  });
+
   it('use custom as attribute based on return value of callback', (done) => {
     const compiler = webpack({
       entry: path.join(__dirname, 'fixtures', 'file.js'),