Dynamically loading Webpack assets using loader plugin #1
Description
I would like a functionality to import static assets using webpack like
simple-pug-loader - Webpack Plugin
Found this Blog post - Adding asset files to webpack for use-case.
See under heading: Adding asset files directly to HTML file where the author uses 'pug', a similar html template library to yours.
I'm currently using your library like so:
// index.htb.js
const Htb = require("htb");
module.exports = (title, withBundleAnalyzer = false) => ((
Htb('!DOCTYPE', { html: true })
('html', {}, () => [
Htb('head', {}, () => [
Htb('meta', { charset: 'utf-8' }),
Htb('link', { rel: "icon", href: "/favicon.ico" }),
Htb('meta', {
name: 'viewport',
content: 'width=device-width, initial-scale=1',
}),
Htb('title', {}, title),
]),
Htb('body', {}, () => [
Htb('noscript', {}, "You need to enable JavaScript to run this app."),
withBundleAnalyzer ?
Htb('a', {href: '/report.html' ,style: "background: pink;" }, 'Bundle Analyzer')
: Htb('a'),
Htb('div', {id: 'app'}, ''),
]),
Htb('a', {href: '/bundle.js.LICENSE.txt'}, 'LICENSES')
])
).html);Where, unless I'm using CopyWebpackPlugin there is no guarantee that bundle.js.LICENSES.txt would exists, furthermore, I'm looking to replace a static bundle.js.LICENSE.txt to using the dynamically created one from Webpack, which could maybe be passed as an asset from webpack config inte index.htb.js, that might be the solution I'm looking at currently.
NOTE: The current usage of LICENSE.txt as a pure link is just temporary, I could solve this particular issue by creating another htb.js template for 'license.html', but the problem remains in dynamically loading the content or getting the src of LICENSE.txt in the htb template.
Also, for conditionals, how would I add an empty Htb() element as a fallback?
Aside from that, my immediate usage of htb has been positive; I previously used this snippet in my webpack config:
new HtmlWebpackPlugin({
templateContent: ({ htmlWebpackPlugin }) =>
'<!DOCTYPE html><html><head><meta charset="utf-8"><title>' +
htmlWebpackPlugin.options.title +
'</title></head><body>' +
'<a href="/report.html" style="background: pink;">Bundle Analyzer</a>' +
'<div id="app"></div>' +
'</body></html>',
filename: "index.html",
}),For now though, I'm still using the HtmlWebpackPlugin:
const createIndexHTML = require("./index.htb.js");...
new HtmlWebpackPlugin({
templateContent: ({ htmlWebpackPlugin }) => createIndexHTML(htmlWebpackPlugin.options.title, true),
filename: "index.html"
})But I would like to see a more streamlined integration.