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.
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.
npm i rollup-plugin-html-inline -D./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>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,
}),
]rollup -cFour previous steps will remove content of dist directory and generate in it three files from scratch
destoption specifies html name. By default it uses"index.html"or input file if it has.htmlextensionhashBy- hash type, which one will be applied to file names (by default it is 'time').filevalue means hash based on content length (there is a little possibility to match with previous length, sotimeis 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: falseor switchinghashoption will clean all files in the distination directory)resourcesDirectory- additional subdirectory regarding final html direcory, where will be placed resources (js, css etc)
(!) At the moment plugin supports just names matched with [\w\d-_./]*[name].[hash][ext]* pattern. On another patterns it is not tested yet (but it is possible to change the pattern due entryFileNames and assetFileNames options).