index.html
<html>
<head>
<title>index.html</title>
</head>
<body>
<include src="component/button/button.html"></include>
</body>
</html>
component/button/button.html
<button class="button"><div class="button__text">Button</div></button>
var posthtml = require('posthtml'),
html = require('fs').readFileSync('index.html').toString();
posthtml()
.use(require('posthtml-include')({ encoding: 'utf-8' }))
.process(html)
.then(function(result) {
console.log(result.html);
//<html>
//<head>
// <title>index.html</title>
//</head>
//<body>
// <button class="button"><div class="button__text">Text</div></button>
//</body>
//</html>
})
root: Root folder path for include. Default ./
encoding: Default utf-8
addDependencyTo: An object with addDependency() method, taking file path as an argument. Called whenever a file is included. Default null
. You can use it for hot-reloading in webpack posthtml-loader like this:
posthtml: function(webpack) {
return [
require('posthtml-include')({ addDependencyTo: webpack })
]
}