-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Extend current functionality to inject partials #1330
Comments
There are so many different ways to solve this without adding more features to this plugin so I am not sure if the value is high enough to add it to the plugin itself. Another way could be something like this codesandbox: It supports:
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{ test: /\.ejs$/, loader: 'ejs-loader' },
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/layout.js",
page: 'home',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: "src/layout.js",
page: 'about',
filename: 'about.html'
}),
]
};
module.exports = templateData => {
const { htmlWebpackPlugin } = templateData;
const { page } = htmlWebpackPlugin.options;
return (
require("./templates/header.ejs")(templateData) +
require("./templates/" + page + ".ejs")(templateData) +
require("./templates/footer.ejs")(templateData)
);
};
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="background:orange">
</body>
</html>
<h1>Home</h1>
This is the home page
<h1>About</h1>
This is the about page What do you think about this example? |
Looks promising! Didn't know I could make it like this.
I will give it a try and when everything runs as expected, I will close this request. Thanks! But for all who read this thread, if you provide an object for
|
any idea on how to solve this without requiring maintaining a template? never really liked the idea of having to maintain a template and instead letting it all come together dynamically i really like the idea of NOT having to do any type of maintaining of the template and can instead focus on a very individual component that needs to be injected like a simple partial that has the template composition there reminds me of creating template components in wordpress 😝 i wonder though if i could utilize some ideas in that approach for the partial plugin i maintain where this issue is stemming from. being able to figure out where to properly hook into html-webpack-plugin to achieve this on my own in html-webpack-partials-plugin would also be very helpful if you dont want to provide any of this kind of support first class |
@colbyfayock the code is quite small module.exports = templateData => {
return (
require("./templates/header.ejs")(templateData) +
require("./templates/" + templateData.htmlWebpackPlugin.options.page + ".ejs")(templateData) +
require("./templates/footer.ejs")(templateData)
);
}; or even with only one wrapper file like in this improved codesandbox module.exports = templateData =>
require("./templates/layout.ejs")({...templateData,
body: require("./templates/" + templateData.htmlWebpackPlugin.options.page + ".ejs")(templateData)
}); maintaining only ~5 lines of code which control how your page will be sticked together seems doable to me This also provides you the flexibility to have exceptions e.g. to have a special header for some pages But maybe your case is slightly differently (please correct me if I am wrong). <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html> Here is one possible solution: You could publish the following code to npm as a new package for example <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="<%= htmlWebpackPlugin.options.rootId || 'root' %>"></div>
</body>
</html> Now it can be used inside your project like this: const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: require.resolve('html-webpack-plugin-react-template')
}),
]
}; What do you think about this approach? |
@jantimon I've modified your example. Just go to the |
The loader does only generate the template function to allow you passing variables. try for example |
I will give the last solution a try, thanks for your support! |
|
@jantimon ( "html-webpack-plugin": "^4.0.0-beta.11") Why does the
webpack.config.js:
|
You have to use a slash after pages so webpack can guess the folder correctly: require(`../pages/ Require calls are always relative to the current file. |
Sorry I am really not sure why this is happening :( |
Yeah, I know, if I find time I will create a little repo for this, but probably this is expected when using dynamic |
Is your feature request related to a problem? Please describe.
Currently I want to build a static multi-page html app.
As suggested by you, I should provide a template page for example
about.html
and do:require("./header")
Here goes my about markup
require("./footer")
I don't like it as I have to repeat header and footer in every page.
Describe the solution you'd like
I currently have a
layout.html
page which serves as my template for all pages.This template
requires
both: header and footer. I don't have to require them in every page now.Now i only have to change what needs to be different in every page --> the content.
How I would do it:
We define a
partials
section where we can define a section in the page where this partial needs to be injected (location
) and a url where the partials resides (path
).The
location
can be placeholder/tag/selector.The
ChildCompiler.compileTemplate
could now create arequire
statement using theurl
specified inpath
and inject the respectiverequire
statement in the desired location of the template.That's it. The further processing is done as usual.
This can be a PR from our side. --> v3.3 ?
Benefits:
templateParameters
.Describe alternatives you've considered
Alternative 1: Provide a hook before
template compilation
happens (which would be triggered only if partials are defined) and we could create a plugin, that creates an updated template which includes all therequire's
and we give you thepath
of the updated template back . We don't alter the original template but give you a reference to an altered copy.Alternative 2: We implement a plugin that would include most of the logic you have implemented in
html-webpack-plugin
. Doesn't feel right, as the logic already exists.Here we would only need a suggestion from your-side which webpack hook to attach to, in order to make it work on our side.
Additional context
I've installed the beta version for your plugin and realized that my
require
calls in mylayout.html
template don't work anymore.It spits out the
require
statement in the browser:Is this going to be supported in the next version?
The text was updated successfully, but these errors were encountered: