Auto-inject the resulting rollup bundle via script and link tags into an HTML template.
npm install --save-dev rollup-plugin-generate-html-template// rollup.config.js
import htmlTemplate from 'rollup-plugin-generate-html-template';
export default {
entry: 'src/index.js',
dest: 'dist/js/bundle.js',
plugins: [
htmlTemplate({
template: 'src/template.html',
target: 'index.html',
}),
],
};On final bundle generation the provided template file will have a script tag injected directly above the closing body tag with a link to the js bundle and similarly a link tag above the closing head to the css bundle. By default it uses the same file name and places it directly next to the JS bundle.
<!-- src/index.html -->
<html>
<head>
<title>Example</title>
<head>
<body>
<canvas id="main"></canvas>
</body>
</html>
<!-- dist/index.html -->
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="bundle.css">
<head>
<body>
<canvas id="main"></canvas>
<script src="bundle.js"></script>
</body>
</html>template: string(required) The path to the source template.target: stringThe directory and file name to use for the html file generated with the bundleattrs: string[]The attributes provided to the generated bundle script tag, for example:
['async', 'defer']will generate<script async defer src="bundle.js"></script>replaceVars: {[key: string]: string | function}An object containing variables that will be replaced in the generated html, for example:
{ '__CDN_URL__': process.env.NODE_ENV === 'production' ? 'https://mycdn.com' : '' }will replace all instances of__CDN_URL__withhttp://mycdn.comif the environment is productionembedContent: bool- If true, rather than generating<script src="...">tag, it will embed the script content directly inside the HTML