RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/principalstudio/html-webpack-inject-preload below:

principalstudio/html-webpack-inject-preload: A html webpack plugin for injecting <link rel='preload'>

HTML Webpack Inject Preload

A HTML Webpack Plugin for injecting <link rel='preload'>

This plugin allows to add preload links anywhere you want.

You need to have HTMLWebpackPlugin v4 or v5 to make this plugin work.

npm i -D @principalstudio/html-webpack-inject-preload

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackInjectPreload({
      files: [
        {
          match: /.*\.woff2$/,
          attributes: {as: 'font', type: 'font/woff2', crossorigin: true },
        },
        {
          match: /vendors\.[a-z-0-9]*.css$/,
          attributes: {as: 'style' },
        },
      ]
    })
  ]
}

Options

files: An array of files object
- match: A regular expression to target files you want to preload
- attributes: Any attributes you want to use. The plugin will add the attribute rel="preload" by default.

Usage

The plugin is really simple to use. The plugin injects in headTags, before any link, the preload elements.

For example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <%= htmlWebpackPlugin.tags.headTags %>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

will generate

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <link href="dist/fonts/font.woff2" rel="preload" type="font/woff2" crossorigin>
    <link href="dist/css/main.css">
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4