# rollup-plugin-bundle-html > create html with the bundle file Latest version **0.2.2** (published 2019-10-17) · MIT license · 0 weekly downloads ## Install ```sh npm install rollup-plugin-bundle-html pnpm add rollup-plugin-bundle-html yarn add rollup-plugin-bundle-html bun add rollup-plugin-bundle-html ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.2 | | Published | 2019-10-17 | | First published | 2018-08-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 23 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 27 | | Author | louisx | | Maintainers | louisx | | Keywords | rollup, rollup-plugin, html, bundle-html | ## Links - npm: https://www.npmjs.com/package/rollup-plugin-bundle-html - Repository: https://github.com/haifeng2013/rollup-plugin-bundle-html - Homepage: https://github.com/haifeng2013/rollup-plugin-bundle-html#readme - Issues: https://github.com/haifeng2013/rollup-plugin/issues - npm.io page: https://npm.io/package/rollup-plugin-bundle-html ## Dependencies (2) - [hasha](https://npm.io/package/hasha.md) ^4.0.1 - [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.2 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 0.2.2 (latest) — 2019-10-17 - 0.2.1 — 2019-05-30 - 0.2.0 — 2019-05-21 - 0.1.5 — 2019-03-21 - 0.1.4 — 2018-10-10 - 0.1.3 — 2018-10-10 - 0.1.2 — 2018-09-06 - 0.1.1 — 2018-09-05 - 0.1.0 — 2018-08-21 - 0.0.3 — 2018-08-21 - 0.0.2 — 2018-08-21 - 0.0.1 — 2018-08-21 ## README # rollup-plugin-bundle-html This plugin inject the bundle js file as well as external js files to html template. This plugin extends from [rollup-plugin-fill-html](https://github.com/alwaysonlinetxm/rollup-plugin-fill-html) to provide more flexibility for injecting files. ## Installation yarn add --dev rollup-plugin-bundle-html or npm install -D rollup-plugin-bundle-html ## Usage ```js 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: '' dest: "dist/foo", filename: 'index.html', inject: 'head', externals: [ { type: 'js', file: "file1.js", pos: 'before' }, { type: 'js', file: "file2.js", pos: 'before' } ] }) ] }; ``` ```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. ```js 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` ## onlinePath You can set 'onlinePath' as anything like `//www.sohu.com/` if you want to put the files on CDN after building. ```js { output: { file: 'dist/foo/main.js', }, // ... plugins: [ html({ dest: "dist/foo", // ... onlinePath: '//www.sohu.com/dist/foo' }) ] } ``` and you will get something like: ``. ## 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 `` and the js files will be inserted into ``. - __defaultmode__: (*optional*) specify a value to use in the script `type` attribute. If no mode is specified, the `type` 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 --- _Source: https://npm.io/package/rollup-plugin-bundle-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._