Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rspack-contrib/html-rspack-tags-plugin
Enhances `rspack.HtmlRspackPlugin` by letting you specify script or link tags to inject.
https://github.com/rspack-contrib/html-rspack-tags-plugin
rspack rspack-plugin webpack
Last synced: 16 days ago
JSON representation
Enhances `rspack.HtmlRspackPlugin` by letting you specify script or link tags to inject.
- Host: GitHub
- URL: https://github.com/rspack-contrib/html-rspack-tags-plugin
- Owner: rspack-contrib
- License: mit
- Created: 2024-10-17T08:44:45.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-10-17T10:21:08.000Z (2 months ago)
- Last Synced: 2024-11-21T13:19:20.754Z (about 1 month ago)
- Topics: rspack, rspack-plugin, webpack
- Language: JavaScript
- Homepage:
- Size: 134 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
html-rspack-tags-plugin
========================================
[](https://badge.fury.io/js/html-rspack-tags-plugin) [](https://travis-ci.org/jharris4/html-rspack-tags-plugin) [](https://github.com/Flet/semistandard)
Enhances [rspack.HtmlRspackPlugin](https://rspack.dev/plugins/rspack/html-rspack-plugin)
by letting you specify script or link tags to inject.
Notice
------------
This plugin is forked from [jharris4/html-webpack-tags-plugin](https://github.com/jharris4/html-webpack-tags-plugin).
Change list:
- Rename package to `html-rspack-tags-plugin`
- Rename plugin to `HtmlRspackTagsPlugin`
- Remove `webpack` dependency and use `@rspack/core` instead
- Remove `HtmlRspackPlugin` dependency and use `rspack.HtmlRspackPlugin` instead
- Remove `copy-webpack-plugin` dev dependency and use `rspack.CopyRspackPlugin` instead
- Remove `mini-css-extract-plugin` dev dependency and use `rspack.CssExtractRspackPlugin` instead
Motivation
------------
When using a plugin such as [CopyRspackPlugin](https://rspack.dev/plugins/rspack/copy-rspack-plugin) you may have assets output to your build directory that are not detected/output by the HtmlRspackPlugin.
This plugin lets you manually resolve such issues, and also lets you inject the rspack `publicPath` or compilation `hash` into your tag paths if you so choose.
Installation
------------
You must be running rspack on node 16.x or higher
Install the plugin with npm:
```shell
$ npm install --save-dev html-rspack-tags-plugin
```
Basic Usage
-----------
Require the plugin in your rspack config:
```javascript
var HtmlRspackTagsPlugin = require('html-rspack-tags-plugin');
var rspack = require('@rspack/core');
```
Add the plugin to your rspack config:
```javascript
output: {
publicPath: '/abc/'
},
plugins: [
new rspack.HtmlRspackPlugin(),
new HtmlRspackTagsPlugin({ tags: ['a.js', 'b.css'], append: true })
]
```
Which will generate html like this:
```html
```
Configuration
-------
### Default Options
This plugin will run and do nothing if no options are provided.
The default options for this plugin are shown below:
```js
const url = require('url');
const DEFAULT_OPTIONS = {
append: true,
prependExternals: true,
jsExtensions: ['.js'],
cssExtensions: ['.css'],
useHash: false,
addHash: (assetPath, hash) => assetPath + '?' + hash,
hash: undefined,
usePublicPath: true,
addPublicPath: (assetPath, publicPath) => url.resolve(publicPath, assetPath),
publicPath: undefined,
tags: [],
links: [],
scripts: [],
metas: undefined
};
```
---
### Options
All options for this plugin are validated as soon as the plugin is instantiated.
The available options are:
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`append`**|`{Boolean}`|`true`|Whether to prepend or append the injected tags relative to any existing or rspack bundle tags (should be set to **false** when using any `script` tag **`external`**) |
|**`prependExternals`**|`{Boolean}`|`true`|Whether to default **`append`** to **false** for any `` `tag` that has an **`external`** option specified|
|**`files`**|`{Array<String>}`|`[]`|If specified this plugin will only inject tags into the HtmlRspackPlugin instances that are injecting into these files (uses [minimatch](https://github.com/isaacs/minimatch))|
|**`jsExtensions`**|`{String\|Array<String>}`|`['.js']`|The file extensions to use when determining if a `tag` in the `tags` option is a `script`|
|**`cssExtensions`**|`{String\|Array<String>}`|`['.css']`|The file extensions to use when determining if a `tag` in the `tags` option is a `link`|
|**`useHash`**|`{Boolean}`|`false`|Whether to inject the rspack `compilation.hash` into the tag paths|
|**`addHash`**|`{Function(assetPath:String, hash:String):String}`|`see above`|The function to call when injecting the `hash` into the tag paths|
|**`hash`**|`{Boolean\|String\|Function}`|`undefined`|Shortcut to specifying `useHash` and `addHash`|
|**`usePublicPath`**|`{Boolean}`|`true`|Whether to inject the (rspack) `publicPath` into the tag paths|
|**`addPublicPath`**|`{Function(assetPath:String, publicPath:String):String}`|`see above`|Whether to inject the `publicPath` into the tag paths|
|**`publicPath`**|`{Boolean\|String\|Function}`|`undefined`|Shortcut to specifying `usePublicPath` and `addPublicPath`|
|**`links`**|`{String\|Object\|Array<String\|Object>}`|`[]`|The tags to inject as `<link>` html tags|
|**`scripts`**|`{String\|Object\|Array<String\|Object>}`|`[]`|The tags to inject as `<script>` html tags|
|**`tags`**|`{String\|Object\|Array<String\|Object>}`|`[]`|The tags to inject as `<link>` or `<script>` html tags depending on the tag `type`|
|**`metas`**|`{Object\|Array<Object>}`|`undefined`|The tags to inject as `<meta>` html tags|
---
The **`append`** option controls whether tags are injected before or after `rspack` or `template` tags.
If multiple plugins are used with **`append`** set to **false** then the **tags will be injected in reverse order**.
This option has no effect on **`meta`** tags.
This sample `index.html` template:
```html
<html>
<head><link href="template-link"></head>
<body><script src="template-script">