html-rollup-plugin v1.0.2
html-rollup-plugin
This plugin inject the bundle js file as well as external js files to html template. This plugin extends from rollup-plugin-fill-html to provide more flexibility for injecting files.
Installation
yarn add --dev html-rollup-plugin
or
npm install -D html-rollup-plugin
Usage
import html from 'html-rollup-plugin';
export default {
input: 'src/main.js',
output: {
file: 'dist/foo/bundle.js',
},
plugins: [
html({
template: 'src/template.html',
// or html code: '<html><head></head><body></body></html>'
dest: "dist/foo",
filename: 'index.html',
inject: 'head',
favicon: 'favicon.ico',
defer: true,
externals: [
{ type: 'js', file: "file1.js", pos: 'before' },
{ type: 'js', file: "file2.js", pos: 'before' }
]
})
]
};
<!-- src/template.html -->
<html>
<head>
</head>
<body>
</body>
</html>
<!-- dist/foo/index.html -->
<html>
<head>
<script type="text/javascript" src="../../file1.js"></script>
<script type="text/javascript" src="../../file2.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
</body>
</html>
Hash
You can set string 'hash' for output file in rollup.config.js, and your bundle and source map (if you turned on sourcemap option) will have the string 'hash' be replaced by its hash.
export default {
input: 'src/main.js',
output: {
file: 'dist/foo/bundle-[hash].js',
// Turn on sourcemap
sourcemap: true
},
plugins: [
...
]
};
You will find both bundle and map files are hashed and placed in your dist/foo
folder:
bundle-1.js
, bundle-1.js.map
onlinePath
You can set 'onlinePath' as anything like //www.sohu.com/
if you want to put the files on CDN after building.
{
output: {
file: 'dist/foo/main.js',
},
// ...
plugins: [
html({
dest: "dist/foo",
// ...
onlinePath: '//www.sohu.com/dist/foo'
})
]
}
and you will get something like: <script src="//www.sohu.com/dist/foo/main.js"></script>
.
Options
You can pass an option to the html()
just like above, and there are some options:
- template: (required) either path or code string of the template file, template should be a html file.
- filename: optional if 'template' is a path: the name of the result html file, if omitted, will use name in template as file name.
- externals: (optional) a list of files which will be insert into the resule
html. The file should be a valid url.
- externals.file: file path.
- externals.type: the type of file. can be 'js' or 'css'.
- externals.pos: position where the file is inserted.
- externals.timestamp: append timestamp as query string to file path.
- inject: (optional) indicate where to insert files, it can be 'head' or
'body'. For default, the css files will be inserted into
<head>
and the js files will be inserted into<body>
. - defaultmode: (optional) specify a value to use in the script
type
attribute. If no mode is specified, thetype
attribute is omitted. Externals can optionally override this per file. - dest: (optional) the folder in which js file is searched and be injected to html file.
- absolute: (optional) indicates is paths of injected files should starts with "/".
- ignore: (optional) specify a regex that will prevent all matching files from being injected.
- onlinePath: (optional) add an onlinePath prefix to the file while bundle file would be pushed into CDN instead of a local file.
License
MIT