rollup-plugin-html-inline
v1.0.14
Published
Rollup plugin, which one generates an html file based on the specified template
Downloads
15
Readme
rollup-plugin-html-inline
About:
Generates an html file based on the specified template and inserts links to the generated scripts into it.
This plugin is similar to rollup-plugin-generate-html-template, but unlike it rollup-plugin-html-inline has the option to add a hash to the names of generated resources (as rollup can do through the entryFileNames
and assetFileNames
options) and to the resulting html file.
Motivation:
As we know, rollup has opportunity to add a hash to the names of compiled files using the entryFileNames
and assetFileName
options. It works great. But the method leads to unnecessary manual work, because in the final html file you have to manually change the paths to resources each time due to the changed hash.
Unfortunately, the lack of such a feature out of the box, any generally accepted practice, and any documented API for extracting and managing a hash to make embedding it manually with minimal effort made these wonderful options useless to me. That's why I have thought about creating a plugin that can do html generation with links embedding solving the problem.
Usage:
Step 1: install
npm i rollup-plugin-html-inline -D
Step 2: create template
./public/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<link rel="stylesheet" href="/styles.[hash].css" type="text/css">
</head>
<body>
<div id="app"></div>
<script async src="/main.[hash].js"></script>
</body>
</html>
Step 3: configure it
rollup.config.js:
import css from 'rollup-plugin-css-only'
import { htmlInliner as inline } from 'rollup-plugin-html-inline';
// ...
const development = !!process.env.ROLLUP_WATCH
export default {
input: './src/index.js',
output: {
dir: 'dist',
format: 'iife',
},
plugins: [
// ...
css({ output: `styles.css`}),
inline({
template: './public/index.html',
hash: !development,
}),
]
Step 4: build it
rollup -c
Step 5: enjoy
Four previous steps will remove content of dist
directory and generate in it three files from scratch
Additional options:
dest
option specifies html name. By default it uses"index.html"
or input file if it has.html
extensionhashBy
- hash type, which one will be applied to file names (by default it is 'time').file
value means hash based on content length (there is a little possibility to match with previous length, sotime
is more preferable). Hash based on file content doesn't support yet (on start I've rejected the option in order not to pull an excess dependency)cleanExclude
- string array consisting of paths to files, which ones won't deleting between recompilations (by default every recompilation withhash: false
or switchinghash
option will clean all files in the distination directory)resourcesDirectory
- additional subdirectory regarding final html direcory, where will be placed resources (js, css etc)