Merge pull request #54 from toxic-johann/master

Add excludeHtmlNames to solve problem mentioned in #48

Author: jeffposnick

README.md

@@ -180,6 +180,31 @@ new PreloadWebpackPlugin({
 })
 ```
 
+## Filtering Html
+
+In some case, you may don't want to preload resource on some file. But using `fileBlacklist`  is werid, because you may want to inlcude this chunk on another file. So you can use `excludeHtmlNames` to tell preload plugin to ignore this file.
+
+If you have multiple html like index.html and example.html, you can exclude index.html like this.
+
+```javascript
+plugins: [
+  new HtmlWebpackPlugin({
+    filename: 'index.html',
+    template: 'src/index.html',
+    chunks: ['main']
+  }),
+  new HtmlWebpackPlugin({
+    filename: 'example.html',
+    template: 'src/example.html',
+    chunks: ['exampleEntry']
+  }),
+  // I want this to affect only index.html
+  new PreloadWebpackPlugin({
+    excludeHtmlNames: ['index.html'],
+  })     
+]
+```
+
 Resource Hints
 ---------------------
 

index.js

@@ -49,7 +49,8 @@ const doesChunkBelongToHTML = (chunk, roots, visitedChunks) => {
 const defaultOptions = {
   rel: 'preload',
   include: 'asyncChunks',
-  fileBlacklist: [/\.map/]
+  fileBlacklist: [/\.map/],
+  excludeHtmlNames: [],
 };
 
 class PreloadPlugin {
@@ -61,6 +62,10 @@ class PreloadPlugin {
     const options = this.options;
     compiler.plugin('compilation', compilation => {
       compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, cb) => {
+        if (this.options.excludeHtmlNames.indexOf(htmlPluginData.plugin.options.filename) > -1) {
+          cb(null, htmlPluginData);
+          return;
+        }
         let filesToInclude = '';
         let extractedChunks = [];
         // 'asyncChunks' are chunks intended for lazy/async loading usually generated as

package-lock.json

@@ -367,3 +367,108 @@ describe('filtering unwanted files', function() {
     compiler.outputFileSystem = new MemoryFileSystem();
   });
 });
+
+describe('multiple html', function() {
+  it('each one only include their own chunk', function(done) {
+    const compiler = webpack({
+      entry: {
+        js: path.join(__dirname, 'fixtures', 'file.js'),
+        moduleA: path.join(__dirname, 'fixtures', 'module-a.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name].js',
+        chunkFilename: 'chunk.[chunkhash].js',
+        publicPath: '/',
+      },
+      devtool: 'cheap-source-map',
+      plugins: [
+        new HtmlWebpackPlugin({
+          filename: 'index.html',
+          chunks: ['js'],
+        }),
+        new HtmlWebpackPlugin({
+          filename: 'home.html',
+          chunks: ['moduleA'],
+        }),
+        new PreloadPlugin()
+      ]
+    }, function(err, result) {
+      expect(err).toBeFalsy();
+      expect(JSON.stringify(result.compilation.errors)).toBe('[]');
+      const html = result.compilation.assets['index.html'].source();
+      const homeHtml = result.compilation.assets['home.html'].source();
+      expect(html).toContain('<link rel="preload" as="script" href="/chunk.');
+      expect(homeHtml).not.toContain('<link rel="preload" as="script" href="/chunk.');
+      done();
+    });
+    compiler.outputFileSystem = new MemoryFileSystem();
+  });
+
+  it('exclude by html filename', function(done) {
+    const compiler = webpack({
+      entry: {
+        js: path.join(__dirname, 'fixtures', 'file.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name].js',
+        chunkFilename: 'chunk.[chunkhash].js',
+        publicPath: '/',
+      },
+      devtool: 'cheap-source-map',
+      plugins: [
+        new HtmlWebpackPlugin({
+          filename: 'index.html',
+          chunks: ['js'],
+        }),
+        new HtmlWebpackPlugin({
+          filename: 'home.html',
+          chunks: ['js'],
+        }),
+        new PreloadPlugin({
+          excludeHtmlNames: ['index.html'],
+        })
+      ]
+    }, function(err, result) {
+      expect(err).toBeFalsy();
+      expect(JSON.stringify(result.compilation.errors)).toBe('[]');
+      const html = result.compilation.assets['index.html'].source();
+      const homeHtml = result.compilation.assets['home.html'].source();
+      expect(html).not.toContain('<link rel="preload" as="script" href="/chunk.');
+      expect(homeHtml).toContain('<link rel="preload" as="script" href="/chunk.');
+      done();
+    });
+    compiler.outputFileSystem = new MemoryFileSystem();
+  });
+});
+
+describe('filtering unwanted html', function() {
+  it('does not include preload asset into index.html file', 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({
+          excludeHtmlNames: ['index.html'],
+        })
+      ]
+    }, function(err, result) {
+      expect(err).toBeFalsy();
+      expect(JSON.stringify(result.compilation.errors)).toBe('[]');
+      const html = result.compilation.assets['index.html'].source();
+      expect(html).not.toContain('<link rel="preload" as="script" href="/chunk.');
+      done();
+    });
+    compiler.outputFileSystem = new MemoryFileSystem();
+  });
+});