@janff/html-bundle
v0.0.6
Published
HTML bundler base on esbuild, support multiply html entry, keeping original directory structure
Downloads
10
Maintainers
Readme
Features
- HTML Based
- ESBuild
- Use for mutiple html(glob input)
- Keeping original directory structure
- No hash name file but hash query for clearing cache
Installation and Usage
npm install @janff/html-bundle -D
Add a config file or not
// default is ./bundle.config.js
import vuePlugin from 'esbuild-plugin-vue3';
export default {
input: {
dir: 'src',
files: '**/*.html', // glob style
ignore: 'node_modules/**'
},
output: {
dir: 'dist',
minify: true,
assetsDir: 'assets'
},
plugins: [ // esbuild plugins here
vuePlugin()
],
loader: { // esbuild loaders here
'.svg': 'text'
}
}
Then run script in terminal
npx html-bundle --config bundle.config.js
or add to package.json
{
"scripts": {
"build": "html-bundle"
}
}
npm run build
Cli Options
--config
Config file path, default is bundle.config.js
--watch
watch file change to rebuild
HTML Config
You will have 3 attribute opiton to indicate the js/css file to bundle or not:
bundle
file that will be bundle when this attribute is set to script or css link tag;
bundle-to=filepath
for inline script or css to bundle to specific path
bundle-inject
for extarnal link script or css to be injected in html file
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Html Bundle Example</title>
<script>
console.log('Will not be bundle here')
</script>
<style>
[v-cloak] {
display: none;
}
</style>
<!-- content in css/reset.css will be inject ( removing below link and create a style tag) -->
<link rel="stylesheet" href="css/reset.css" bundle-inject>
<link rel="stylesheet" href="css/main.css" bundle>
</head>
<body>
<div v-cloak id="app">
<top-header></top-header>
<div>{{ name }}</div>
</div>
</body>
</html>
<!-- the following script has no bundle attribute, then it will not be bundled but copy to dist -->
<script src="./js/not-bundle.js"></script>
<script src="js/to-bundle.js" bundle></script>
<!-- content in js/file-to-inline.js will be inject in the below script -->
<script src="js/file-to-inline.js" bundle-inject></script>
<script type="module" bundle-to="js/inline-to-bundle.js">
// content here will be empty and bundle to ./js/inline-to-bundle.js
import TopHeader from './js/header.vue';
import { createApp, h } from "vue/dist/vue.esm-browser.js";
const App = {
components: { TopHeader },
data() {
return {
name: "111",
list: [1, 2, 4]
};
},
};
createApp(App).mount("#app");
</script>
Example Result
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Bundle Example</title>
<script>
console.log('Will not be bundle here')
</script>
<style>
[v-cloak] {
display: none;
}
</style>
<style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;outline:none}body,html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none;width:100%}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}a{text-decoration:none}a:focus,a:active,a{outline:none}a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0)}a,p,span,i,h1,h2,h3,h4,h5,h6{-webkit-font-smoothing:antialiased}a,img,input{border:none}a,img{-webkit-touch-callout:none}img{width:100%}ul,ol,li{list-style:none}table{border-collapse:collapse;border-spacing:0}input[type=text],input[type=password],select,a{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}em,i,b{font-style:normal}fieldset,img{border:0;object-fit:contain}input,textarea,select{font-size:100%}audio,canvas,video{display:inline-block;display:inline;zoom:1}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.fl{float:left}.fr{float:right}.hide{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#949494}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#949494}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#949494}.text-hide{font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-hidden{font-size:0;line-height:0;text-indent:-9999px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:3px;background:#fff0;-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,0)}::-webkit-scrollbar-thumb{border-radius:3px;background:#0000001f;-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.2)}
</style>
<link rel="stylesheet" href="css/main.css?ixwoqyh0xgi">
<link href="assets/js-to-bundle.css?bIatSW8corc" ref="stylesheet"></head>
<body>
<div v-cloak="" id="app">
<top-header></top-header>
<div>{{ name }}</div>
</div>
<script src="./js/not-bundle.js"></script>
<script src="js/to-bundle.js?5yownsrfwa0"></script>
<script>(()=>{console.log("suppose to inject into html inline");})();
</script>
<script type="module" src="js/inline-to-bundle.js?zqbhm8psf5u"></script></body></html>