Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including html-resource-hints-plugin with all npm packages installed. Try it out:

var htmlResourceHintsPlugin = require("html-resource-hints-plugin")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

html-resource-hints-plugin v0.0.2

Adds automatically Resource hints to your html-files

Html Resource Hints Plugin

npm version Dependency Status Build status js-semistandard-style

This is an extension plugin for the webpack plugin html-webpack-plugin.

It adds automatically resource-hints to your html files to improve your load time.

Installation

You must be running webpack on node 0.12.x or higher

Install the plugin with npm:

$ npm install --save-dev html-resource-hints-plugin

Install the plugin with yarn:

$ yarn add --dev html-resource-hints-plugin

Basic Usage

Add the plugin to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlResourceHintPlugin()
]  

The above configuration will actually do the same as the following:

plugins: [
  new HtmlWebpackPlugin({
    prefetch: ['*.*'],
    preload: ['*.*']
  }),
  new HtmlResourceHintPlugin()
]  

Even if you generate multiple files make sure that you add the HtmlResourceHintPlugin only once:

plugins: [
  new HtmlWebpackPlugin({
    prefetch: ['*.js', 'data.json'],
    preload: '*.*'
  }),
  new HtmlWebpackPlugin({
    preload: ['*.json'],
    preload: false,
    filename: 'demo.html'
  }),
  new HtmlResourceHintPlugin()
]  
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free