kryndex / resource-hints-webpack-plugin

Adds automatically resource hints to your html-files

Resource Hints Webpack Plugin

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 resource-hints-webpack-plugin

Install the plugin with yarn:

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

Basic Usage

Load the plugin

  const ResourceHintWebpackPlugin = require('resource-hints-webpack-plugin');

and add it to your webpack config as follows:

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

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

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

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

plugins: [
  new HtmlWebpackPlugin({
    prefetch: ['*.js', 'data.json'],
    preload: '*.*'
  }),
  new HtmlWebpackPlugin({
    preload: ['*.json'],
    preload: false,
    filename: 'demo.html'
  }),
  new ResourceHintWebpackPlugin()
]