Merge pull request #16 from jackfranklin/add-files-blacklist

Add `filesBlacklist` to avoid preloading certain files

Author: addyosmani

README.md

@@ -126,6 +126,25 @@ will inject just this:
 <link rel="preload" href="home.31132ae6680e598f8879.js" as="script">
 ```
 
+Filtering chunks
+---------------------
+
+There may be chunks that you don't want to have preloaded (sourcemaps, for example). Before preloading each chunk, this plugin checks that the file does not match any regex in the `fileBlacklist` option. The default value of this blacklist is `[/\.map/]`, meaning no sourcemaps will be preloaded. You can easily override this:
+
+```js
+new PreloadWebpackPlugin({
+  fileBlacklist: [/\.whatever/]
+})
+```
+
+Passing your own array will override the default, so if you want to continue filtering sourcemaps along with your own custom settings, you'll need to include the regex for sourcemaps:
+
+```js
+new PreloadWebpackPlugin({
+  fileBlacklist: [/\.map./, /\.whatever/]
+})
+```
+
 Resource Hints
 ---------------------
 

index.js

@@ -20,7 +20,8 @@ const objectAssign = require('object-assign');
 const defaultOptions = {
   rel: 'preload',
   as: 'script',
-  include: 'asyncChunks'
+  include: 'asyncChunks',
+  fileBlacklist: [/\.map/]
 };
 
 class PreloadPlugin {
@@ -70,7 +71,10 @@ class PreloadPlugin {
         }
 
         const publicPath = compilation.outputOptions.publicPath || '';
-        extractedChunks.forEach(entry => {
+
+        extractedChunks.filter(entry => {
+          return this.options.fileBlacklist.every(regex => regex.test(entry) === false);
+        }).forEach(entry => {
           entry = `${publicPath}${entry}`;
           if (options.rel === 'preload') {
             filesToInclude+= `<link rel="${options.rel}" href="${entry}" as="${options.as}">\n`;

test/spec.js

@@ -190,3 +190,32 @@ describe('PreloadPlugin filters chunks', function() {
     compiler.outputFileSystem = new MemoryFileSystem();
   });
 });
+
+describe('filtering unwanted files', function() {
+  it('does not include map files to be preloaded', function(done) {
+    const compiler = webpack({
+      entry: {
+        js: path.join(__dirname, 'fixtures', 'file.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'bundle.js',
+        chunkFilename: 'chunk.[chunkhash].js',
+        publicPath: '/',
+      },
+      devtool: 'cheap-source-map',
+      plugins: [
+        new HtmlWebpackPlugin(),
+        new PreloadPlugin()
+      ]
+    }, 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" href="/chunk.');
+      expect(html).not.toContain('.map"');
+      done();
+    });
+    compiler.outputFileSystem = new MemoryFileSystem();
+  });
+});