-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dynamically loading Webpack assets using loader plugin #1
Comments
hi @Joaqim this is great.
Yeah, sounds like you'd want to pass in // index.htb.js
const Htb = require("htb");
module.exports = (title, licenseTxtPath, 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: licenseTxtPath}, 'LICENSES')
])
).html); You could perhaps also wrap function createIndexHTMLWithCheck(title, licenseTxtPath) {
if (fs.existsSync(licenseTxtPath)) { // check that licenseTxtPath exists
createIndexHTML(title, licenseTxtPath);
}
else {
throw new Error(`${licenseTxtPath} was not found`)
}
}
I'd recommend to use an empty string. So in your case, it would be something like: withBundleAnalyzer ?
Htb('a', {href: '/report.html' ,style: "background: pink;" }, 'Bundle Analyzer')
: '', Thanks a lot for the feedback! |
Yes, Here's a simple adaption of their example: plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/js', to: 'js/'},
{ from: 'node_modules/bootstrap/dist/css', to: 'css/'},
{ from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
]),
new HtmlWebpackPlugin({
templateContent: htb.html,
filename: 'index.html'
}),
new HtmlWebpackTagsPlugin({
append: true,
tags: [
'/js/bootstrap.min.js',
'/css/bootstrap.min.css',
'/css/bootstrap-theme.min.css',
{
path: 'https://fonts.googleapis.com/css?family=Material+Icons',
type: 'css'
}
]
}) Where the resulting header would presumably contain: ...
<script defer src="/js/bootstrap.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet" >
<link href="/css/bootstrap-theme.min.css" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" >
... While still retaining the initial structure from the html generated by While these examples are quite simple and could be done in our |
@Joaqim that's cool! I want to keep Or perhaps you want Htb to output extra metadata alongside Feel free to prototype something! Htb.js is open source and forks are welcome. https://github.com/noway/htb/blob/main/htb.ts If you hack something together that implements your idea I would love to have a look! Thank you :-) |
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:
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 inteindex.htb.js
, that might be the solution I'm looking at currently.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:
For now though, I'm still using the HtmlWebpackPlugin:
...
But I would like to see a more streamlined integration.
The text was updated successfully, but these errors were encountered: