Skip to content
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

Can't use html-webpack-plugin templating features #7

Open
tyler-dot-earth opened this issue May 31, 2018 · 5 comments
Open

Can't use html-webpack-plugin templating features #7

tyler-dot-earth opened this issue May 31, 2018 · 5 comments
Labels
question Further information is requested

Comments

@tyler-dot-earth
Copy link

🐛 Not able to use some of html-webpack-plugin's templating features.

Example from https://github.com/jantimon/html-webpack-plugin/blob/master/README.md#generating-multiple-html-files

<title><%= htmlWebpackPlugin.options.title %></title>

is rendered by this plugin as

<title>&lt;%= htmlWebpackPlugin.options.title %&gt;</title>
@developit
Copy link
Collaborator

This is actually more of an EJS problem - ejs templates don't mix nicely with HTML. I don't have a great recomendation right now other than to avoid using this with ejs templates. Handlebars should work fine, or skip templating altogether since you can just do:

// custom-prerender.js
export default function(params) {
  document.title = 'A Custom Title';
  return '<div>some prerendered html</div>';
}
<!-- template.html -->
<head>
  <title>Default Title</title>
</head>
<body>
  {{prerender:custom-prerender.js}}
</body>

For things folks might have been doing in ejs like script and stylesheet insertion, there are already automated html-webpack-plugin plugins that handle those things in a way that works nicely with prerender-loader.

@developit developit added the question Further information is requested label May 31, 2018
@idudinov
Copy link

Hi there! I was struggling for making templating and pre-rendering work together properly, and realized that the order of file processing should be changed. That seemed to me quite hard to do, so I came up with having a plugin instead of loader. That allows to render html that has been processed by all loaders, templating stuff etc., and do not interrupt/change the usual flow. Here is my version of the plugin, it's quite simple but worked for me:
https://gist.github.com/idudinov/1814a4ce4647c1ec6f9d513a90a5f6b0

Its rendering code and idea in general fully based on prerender-loader project, but simplified just to make simple things without additional options.

Hope this helps someone!

@developit
Copy link
Collaborator

developit commented Nov 2, 2018

@idudinov that looks great. I'm almost tempted to try to migrate this project to be a plugin, or provide both flavors in one module. Thoughts?

@idudinov
Copy link

idudinov commented Nov 2, 2018

Well, I see Webpack philosophy as a way when some new content/assets produced by plugins, but loaders just transform assets to another representation.
Initial idea of prerender-loader seems to me being a loader, which transforms html page to rendered html page. But this issue just demonstrates that in some cases build pipeline would not accept prerendering logic as loader step.
I think there could be cases where exactly loader needed (to integrate rendering between some steps), although not sure about real examples. From my point of view, in most cases rendering would be the final step of build process, after all transformations have been applied.

@badpenguin
Copy link

any of you has a working example with handlebars? i've an array of page objects with url, title, description, og:image, canonical and need to pass it into the template - i was looking at the preact-cli code that does the same but i failed to understand it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

4 participants