Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A html webpack plugin for injecting <link rel='preload'>

License

NotificationsYou must be signed in to change notification settings

principalstudio/html-webpack-inject-preload

Repository files navigation

npmnode-current

HTML Webpack Inject Preload

AHTML Webpack Plugin for injecting<link rel='preload'>

This plugin allows to add preload links anywhere you want.

Installation

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

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

webpack.config.js

constHtmlWebpackPlugin=require('html-webpack-plugin');constHtmlWebpackInjectPreload=require('@principalstudio/html-webpack-inject-preload');module.exports={entry:'index.js',output:{path:__dirname+'/dist',filename:'index_bundle.js'},plugins:[newHtmlWebpackPlugin(),newHtmlWebpackInjectPreload({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 attributerel="preload" by default.

Usage

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

For example

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

will generate

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Webpack App</title><linkhref="dist/fonts/font.woff2"rel="preload"type="font/woff2"crossorigin><linkhref="dist/css/main.css"></head><body><scriptsrc="index_bundle.js"></script></body></html>

About

A html webpack plugin for injecting <link rel='preload'>

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

[8]ページ先頭

©2009-2025 Movatter.jp