googlechromelabs / preload-webpack-plugin Goto Github PK

Building with PreloadWebpackPlugin enabled causes following error:

/home/alex/GIT/proj/node_modules/preload-webpack-plugin/build/index.js:163
          compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(_this2.constructor.name, function (htmlPluginData, callback) {
                                                                  ^

TypeError: Cannot read property 'tapAsync' of undefined
    at /home/alex/GIT/proj/node_modules/preload-webpack-plugin/build/index.js:163:67

Project package versions:
[email protected]
[email protected]

"will" is simply spelled "wiil"

How to make it work with webpack's internal code-splitting functionality?

between 1.2.2 and 1.2.3 you switch the peer dependency from webpack 2.x to v3.x. I should say that this is quite breaking change. Now because the package.json was set with ^1.2.2 it installed 1.2.3 thinking it's OK, except it's not. Please consider changing the major version.

Hello,

The plugin does not work anymore with babel 7.0.0-rc...

Error: Cannot find module '@babel/runtime/core-js/get-iterator'

TODO.

Hello,

I tried to have my custom fonts preloaded :

<link rel="preload" href="/static/fonts/FiraGO-Regular.b68.woff2" as="font" type="font/woff" crossorigin="anonymous">

but I wasnt able with several configuration options.

Where should the font files be imported to force the plugin to generate the <link>s?

Is the plugin capable of that? (I read some old Pull Requests hinting this is not possible)

Just trying out this plugin for two chunks generated by webpack code splitting, everything seems to working fine but in console I am getting these warnings.

The resource http://localhost:8080/98196ebdaabca2c98261.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

Now the error makes sense, but it could take the user a few seconds to navigate to the route which requires these chunks. Is there anyway to stop this error message ?

I.e I preload these code-splitting chunks as follows

<link rel="preload" href="98196ebdaabca2c98261.js" as="script">
<link rel="preload" href="0f4f2b938549bee12ab7.js" as="script">

but they are not loaded on "home" route, only when the user navigates to i.e. "favourites"

Edit : I guess I should be using prefetch

Currently the links uses the raw entry filenames, so they are assumed to be loaded from the root (publicPath: '/'). This breaks when we use a different publicPath.

Should be an easy fix at a first glance, will likely submit a PR later when I got time.

Last release causes RangeError.

NodeJS v9.2.0
NPM 5.5.1
Windows 10
preload-webpack-plugin 2.1.1
webpack 3.10.0

webpack.config is pretty simple

...
new HtmlWebpackPlugin({
	filename: 'index.html',
	template: '../index.html',
	minify: {
		collapseWhitespace: true
	},
	favicon: path.resolve(APPROOT, 'favicon.ico')
}),
new PreloadWebpackPlugin({
	rel: 'prefetch'
}),
...

Error log is

ERROR in   RangeError: Maximum call stack size exceeded
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:26 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:26:29
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9
2017-12-19T07:42:13.0221845Z            
2017-12-19T07:42:13.0221845Z            - index.js:31 isChunkBelongToHtml
2017-12-19T07:42:13.0221845Z              [client]/[preload-webpack-plugin]/index.js:31:9

Thought: would it be useful to detect and support CSS via as="style"?
Example within an html-webpack-plugin template here.

It would be nice if preload-webpack-plugin supports filtering chunks (only include some chunks/exclude some chunks.) like html-webpack-plugin's one.

It will be useful on some use-cases.

1. Some chunks (e.g. Admin page) may contain some sensitive information. so user wants to exclude it from preload targets. (blacklisting)
2. Some chunks don't need to be preloaded. so user wants to include some chunks only (whitelisting)

As of today only Chrome supports preload. Would it make sense to provide an option where Webpack can inject a preload polyfill? Either by specifying a chunk or really just inlining in the HTML (which makes more sense I guess).

Happy to try a PR if that sounds reasonable.

preload-webpack-plugin": "^3.0.0-alpha.3
webpack": "^4.16.
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
ERROR in TypeError: cb is not a function

As discussed briefly in #29, for current version of plugin, only chunks are processed. That means, for most of the cases, only JavaScript files and CSS files (which are exported using extract-text-webpack-plugin) can be added as preload using this plugin. Resources such as image and fonts, which are exported via file-loader, are not chunks but only assets, thus will not be handled by this plugin.

I would suggest to provide an opt-in option to include not only chunks but all assets when running the plugin. For example:

new PreloadWebpackPlugin({
  rel: 'preload',
  include: 'all-assets', // to include both chunks and other assets
  fileBlacklist: [/\.js$/, /\.css$/, /\.woff2$/],
});

Hi, I've been experimenting with this lib and so far it seems really straight forward. I have one question though. Is it possible to setup a timeout after which the preloading starts?

My usecase is:
Let's say I am on slow 3G, the main app is 1.2 mb. Chunks are additional 2mb.
User navigates to the page, it starts loading, but while it loads crucial parts, it starts preloading the additional chunks slowing down the time of first meaningful pain. It would be ideal if it could wait until there's no network traffic but I assume that wouldn't be so straight forward so maybe a timeout at least?

What do you think?

Mind if I submit a function to validate the rel option in the plugin constructor? For values allowed by the spec but not supported by the plugin (e.g. preconnect) it would follow the existing pattern of issuing a console.warn to let the user know they've probably made a mistake, but not break the build as they may have a valid reason for doing this (e.g. using the plugin to test an implementation of preconnect). For values not allowed by the spec, it would follow the existing pattern of issuing a log.error and throwing the same message as an error.

This behavior would be wrapped in a function called in the plugin constructor. For instance, index.js line 30 would be: validateRel(this.options.rel);, coming after the default options are applied so as not to make assumptions about how the supplied value interacts with the default, but rather make an assertion on the option ultimately making it into the build.

Amazon S3 not send CORS headers if use <link rel="prefetch"> without crossorigin attribute.
This response is cached by Chrome, and reuse next access by script tag.
So this script is blocked by CORS policy.

• Test Site

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1">
  <title>crossorigin test</title>
  <link rel="prefetch" href="https://s3-ap-northeast-1.amazonaws.com/macoshita-test-crossorigin/main.js">
</head>
<body>
  <h1>crossorigin prefetch test (maybe fail)</h1>
  <a id="test" href="javascript:void(0)">Click to load script</a>
  <script>
    document.getElementById('test').addEventListener('click', function () {
      const script = document.createElement('script')
      script.src = 'https://s3-ap-northeast-1.amazonaws.com/macoshita-test-crossorigin/main.js'
      script.crossOrigin = 'crossorigin'

      // will be blocked
      document.getElementsByTagName('head')[0].appendChild(script)
    }, false)
  </script>
</body>
</html>

Hello everyone,
I'm currently working on a react app ejected from create-react-app, and in a quest of getting the shortest loading time (and highest pagespeed insight score I admit), I have decided to load everything asynchronously in index.html, and inline a critical css.
So far I've used ScriptExtHtmlWebpackPlugin to async load the main js file.
After that I still got a warning because of a blockig main css file, and I was happy to find this project.

This is how I got it configured :

new ScriptExtHtmlWebpackPlugin({
    defaultAttribute: 'async'
}),
new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'style',
    include: 'all',
    fileBlacklist: [/\.map|.js/]
}),

I've excluded js files since I only wanted to target the css.

and this is what I got at the end

<link rel="preload" href="/static/css/main.f5b70207.css" as="style">
<link href="/static/css/main.f5b70207.css" rel="stylesheet">

Maybe I've missed something, but how come we get 2 links here? Would it be possible to only get the preload one?

After 2.1.0 was published, our builds started breaking with the following:

ERROR in   TypeError: Object.values is not a function

  - index.js:80 extractedChunks.filter.chunk
    [app]/[preload-webpack-plugin]/index.js:80:93

Is this a config problem on our end, or an edge case missed in this new version?

EDIT: Sorry, looks like Object.values is only available by default in node v7+. Feel free to close this, but it may be nice to add node v7 as a dependency.

It would be useful if preload-webpack-plugin supported an option to filter chunks using a whitelist as a complement to the current fileBlacklist option.

My suggestion would be to allow the include option to contain a Regular Expressions in addition to strings.

I'm happy to submit a PR, if this is something that others would also find useful 😊

Related to #6

Installed the new Version 2.3.0 with webpack 4.1.1, and get this error with chunks:

ERROR in   Error: Chunk.parents: Use ChunkGroup.getParents() instead

  - Chunk.js:438 Chunk.get
    [berater-backend]/[webpack]/lib/Chunk.js:438:9

  - index.js:40 doesChunkBelongToHTML
    [berater-backend]/[preload-webpack-plugin]/index.js:40:30

  - index.js:116 extractedChunks.filter.chunk
    [berater-backend]/[preload-webpack-plugin]/index.js:116:61

  - Array.filter

  - index.js:116 compilation.plugin
    [berater-backend]/[preload-webpack-plugin]/index.js:116:45

  - new Promise

  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [berater-backend]/[tapable]/lib/Hook.js:35:21

  - index.js:643
    [berater-backend]/[html-webpack-plugin]/index.js:643:47

  - index.js:173 Promise.resolve.then.then.then.then.then.then.html
    [berater-backend]/[html-webpack-plugin]/index.js:173:18

  - next_tick.js:118 process._tickCallback
    internal/process/next_tick.js:118:7

Do you need my webpack.config?

Hi,
I have the following use case. In a webpack config I'm creating several html files as in this question. I can't find any way in the documentation to treat that case with preload webpack plugin. That is:

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()     
]

Is it possible to do it with this plugin? In the README there are only examples on how to filter the chunks, but not the destination.

Thanks

Don't know where to put this, but the description for this project says prefecth rather than prefetch.

Hi!

I'm not using html-webpack-plugin but am using the strategy implemented by this plugin to preload my async chunks which are the result of code-splitting per route. The HTML looks like this:

<link rel="preload" href="/client.0.js" as="script"/>
<link rel="preload" href="/client.1.js" as="script"/>

When I load the page, only one of the of the chunks are actually used until the user navigates to the other route. Chrome gives me this warning:

The resource http://localhost:3000/client.1.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

According to the network tab, when on the client.1.js route, the client.0.js chunk is always being loaded first because of the preloads and this appears to have a detrimental impact on perf (compared to not using preloads). It results in the user downloading all the JavaScript, even if the user will never visit all of the routes (probably doesn't matter on desktop but on mobile it'd be nice not to download the extra bytes and save my mobile data).

Is there a better strategy that can be implemented? I imagine such a strategy would involve a lot more manual guessing (specific to each app) and require named chunk imports (webpack/webpack#1949) to manually insert a preload (e.g. when a user has scrolled 90% of the way to the CTA)??

Not sure if this is what #11 was getting at.

See:

• https://github.com/WICG/priority-hints/blob/master/EXPLAINER.md
• https://github.com/WICG/priority-hints/blob/master/EXAMPLES.md

I'd imagine there is some opportunity to add in support for automatically setting priorities when we can safely do so, but also allowing folks to customize priorities based on their own needs.

CC: @addyosmani

Hi

The upcoming html-webpack-plugin v4 (currently at 4.0.0-beta.1) has changed the name of several of its hooks, which causes:

Syntax error: Unable to tap into the HtmlWebpackPlugin's callbacks. Make sure to list
PreloadPlugin at some point after HtmlWebpackPlugin in webpack's plugins array.

(See: facebook/create-react-app#5103 (comment))

The new hook names are described here:
jantimon/html-webpack-plugin#953 (comment)

Many thanks :-)

I am not convinced that my prefetched chunks are actually being used. When I click a link on my page to load new chunks, the network tab shows new requests happening for the chunks even though chunks were prefetched at page load time.

If I load the initial page, then kill my local server, then click on a link to load new chunks, a net::ERR_CONNECTION_REFUSED error will happen. Shouldn't we expect the cached/prefetched chunks to be used instead of network requests being initiated?

I am using the following setting for the plugin:

new PreloadWebpackPlugin({
  rel: 'prefetch',
}),

I am using plugin version 1.2.2 and Chrome 60.0.3112.90.

This is a cool plugin, thanks to the author,
But I have a question, how can I go to Preload my Chunks as needed?
I hope to set the Preload property according to the Chunks that the page needs, instead of setting each Chunk, which will waste bandwidth.
Because I can't determine the name of the Chunk needed for each page, I can't use the blacklist/whitelist.

We currently only have the demo.

Peer is outdated

My hypothesis is that default setup of this plugin could actually hurt performance. It adds the resource with the highest prio on the network queue. Delaying critical resources when bandwidth congestion occurs or the max connections have been taken. Basically takes away the benefit of lazyloading. If the hypothesis is proven, it would be better to add them as prefetch by default and optionally as preload

See: NOTE: relationship to prefetch -> https://www.w3.org/TR/preload/

I would like to be able to preload fonts like in this article:
https://shopifyengineering.myshopify.com/blogs/engineering/how-17-lines-of-code-improved-shopify-com-loading-by-50

The current plugin requires that you choose between a single rel: 'preload' or rel: 'prefetch' value that applies to all of the <link>s.

The problem is that rel="preload" is appropriate for subresources that are used immediately, and rel="prefetch" is appropriate for subresources that are lazy-loaded or used on a subsequent navigation. It's possible to have a mix of of those two types of subresources in different webpack chunks.

I'm in favor of changing the way rel works as follows:

• If a string rel value is specified in the config, then always use that for all <link>s.
• If no rel value is specified in the config, then use chunk.initial ? 'preload' : 'prefetch' to determine the rel value for each <link>.
• If a function rel value is specified in the config, then pass in the file path and chunk and use the return value to determine the rel value for each <link>. (This is similar to what as supports, but instead of being passed just the file path, you'd also pass in the chunk.)

CC: @addyosmani

beacuse 'Script error.'

https://stackoverflow.com/questions/5913978/cryptic-script-error-reported-in-javascript-in-chrome-and-firefox

<script src="https://xxx.com/xxx.js" crossorigin="anonymous"></script>

As #45 illustrates, it's easy to slip in functionality that breaks compatibility with older versions of node.

We should do two things to address this:

• Impose a minimum supported node version in the engines field, set to the minimum version of node that is still officially supported by the Node.js foundation. (4.x until April 2018.) This is a breaking change and should be done in 3.x.
• Use @babel/preset-env to transpile against that version, and publish the transpiled code to npm.

While html-webpack-plugin has a config for generating XHTML code, this plugin, which is often used in conjunction with html-webpack-plugin produces only HTML tags.

If the plugin were to generate self-closing tags, this would work for HTML and XHTML doctypes.

Continuation of #35.

If I have two chunks ("foo" and "bar)" loading one asset using file-loader each ("foo.png" and "bar.png") with an HtmlWebpackPlugin each ("foo.html" and "bar.html"), I want "foo.html" to only preload "foo.png", and "bar.html" to only preload "bar.png".

If I have a third chunk "baz" (using a third HtmlWebpackPlugin "baz.html") which uses file-loader to load both "foo.png" and "bar.png", I want both images to be preloaded in "baz.html".

I assume this could be done by new include option (similar to "allChunks").

I'm working on a PWA built using preact cli and I would like to have my font files preloaded but having tried fiddling with my config for hours, it never works.

In my SCSS I have some font declarations

@font-face {
	font-family: 'Inter UI';
	font-display: fallback;
	font-style:  normal;
	font-weight: 400;
	src: url("../assets/fonts/Inter-UI-Regular.woff2") format("woff2"),
	url("../assets/fonts/Inter-UI-Regular.woff") format("woff");
}

@font-face {
	font-family: 'Inter UI';
	font-display: fallback;
	font-style:  normal;
	font-weight: 600;
	src: url("../assets/fonts/Inter-UI-SemiBold.woff2") format("woff2"),
	url("../assets/fonts/Inter-UI-SemiBold.woff") format("woff");
}

And I've tried the allAssets and fileWhiteList settings as described in the README, but there is never any preload links inserted in the HTML.

I have seen that this feature was supported in 2.3.0 which is the version I'm using, so I'm confused why it's not working...

when I try to run the demo I get:

npm run prod

Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.

• configuration has an unknown property 'inject'. These properties are valid:
  object { hot?, hotOnly?, lazy?, host?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, key?, cert?, ca?, pfx?, pfxPassphrase?, inline?, public?, https?, contentBase?, watchContentBase?, open?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }

osx, node 6.9.1, npm 4.1.1

We could do this by just transpiling it down.

I wrote most of the html-webpack-plugin code and would ask you to adapt your plugin a little bit.

Instead of string search and replace you might want to alter the assets array:
https://github.com/jantimon/resource-hints-webpack-plugin/blob/master/index.js#L87-L89

Instead of using the options of your plugin you might want to extend the html-webpack-plugin options so it can be used in multiple instances:
https://github.com/jantimon/resource-hints-webpack-plugin/blob/master/index.js#L64

Can we use this plugin to add a 'preconnect' resource hint ? If yes, can someone share an example

Webpack 4 (which I hear is shipping in Feb. 2018) will introduce changes to the plugin system, and there might be changes required for this plugin to be compatible.

I don't specifically know what might need to change, but I'm opening this as a placeholder to investigate further, and an opportunity to folks from the community who have been involved in migrating other plugins to contribute.

Is it possible to include a media tag for certain preloaded assets. Specifically i want to include a preload link for my banner images. The desired output would be something like this below.

<!--preload image headers-->
<link rel="preload" as="image" href="images/landing-page-banner_mobile.jpg" media="(max-width: 600px)">
<link rel="preload" as="image" href="images/landing-page-banner_s.jpg" media="(max-width: 960px)">
<link rel="preload" as="image" href="images/landing-page-banner_m.jpg" media="(max-width: 1440px)">
<link rel="preload" as="image" href="images/landing-page-banner_l.jpg" media="(min-width: 1441px)">

No more fileWhitelist filtering in v3 alpha. is it intended ?
https://github.com/GoogleChromeLabs/preload-webpack-plugin/blob/v3/src/index.js#L63

new HtmlWebpackPlugin({ filename: '../file-1.html' }),
new HtmlWebpackPlugin({ filename: '../file-2.html' }),
new PreloadWebpackPlugin({ rel: 'prefetch', as: 'script' })

produces file-1.html with

<link rel="prefetch" src="chunk.0.js">
<link rel="prefetch" src="chunk.1.js">
</head>

and file-2.html with

<link rel="prefetch" src="chunk.0.js">
<link rel="prefetch" src="chunk.1.js">
<link rel="prefetch" src="chunk.0.js">
<link rel="prefetch" src="chunk.1.js">
</head>

and so on

Hi,

when you are building with sourcemaps you end up with an array of files as chunk.files. There is already a PR of someone pending for this issue. The code in the PR seems to create two link elements, one for the sourcemap and one for the javascript files, I thought they were supposed to be excluded by default?

<link rel=prefetch href=/static/js/player-profile.1a053006248a6348da68.js, /static/js/player-profile.1a053006248a6348da68.js.map>

I was able to resolve this issue by only returning the first index of the array instead:

else if (Array.isArray(options.include)) {
          // Keep only user specified chunks
          extractedChunks = compilation
              .chunks
              .filter((chunk) => {
                const chunkName = chunk.name;
                // Works only for named chunks
                if (!chunkName) {
                  return false;
                }
                return options.include.indexOf(chunkName) > -1;
              })
              .map(chunk => chunk.files[0]); // only using the first index (actual path)
        }

now the output is correct again:

<link rel=prefetch href=/static/js/player-profile.1a053006248a6348da68.js>

Is this actually a bug with the code or did I just do something wrong while using the plugin?

Using preload plugin causes ERR_INSUFFICIENT_RESOURCES in Chrome Version 56.0.2924.87 (64-bit).
My webpack settings :

  new PreloadWebpackPlugin({
    rel           : 'prefetch',
    include       : 'all',
    fileBlacklist : [/\.js\.map/, /app*.*\.js/, /vendor*.*\.js/]
  })

can preload-webpack-plugin play with webpack4?