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.
yarn add --dev rollup-plugin-bundle-html
or
npm install -D rollup-plugin-bundle-html
import html from 'rollup-plugin-bundle-html';
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',
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="https://github.com/haifeng2013/rollup-plugin-bundle-html/raw/master/./../file1.js"></script>
<script type="text/javascript" src="https://github.com/haifeng2013/rollup-plugin-bundle-html/raw/master/./../file2.js"></script>
<script type="text/javascript" src="https://github.com/haifeng2013/rollup-plugin-bundle-html/raw/master/bundle.js"></script>
</head>
<body>
</body>
</html>
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-76bf4fb5dbbd62f0fa3708aa3d8a9350.js
, bundle-84e0f899735b1e320e625c9a5c7c49a7.js.map
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="https://github.com/haifeng2013/rollup-plugin-bundle-html/raw/master//www.sohu.com/dist/foo/main.js"></script>
.
You can pass an option to the html()
just like above, and there are some options:
<head>
and the js
files will be inserted into <body>
.type
attribute.
If no mode is specified, the type
attribute is omitted. Externals can
optionally override this per file.MIT