-
-
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
Dynamically inject content ? #1325
Comments
Ok, I see there is a partials-plugin So using this plugin works fine, but now I cannot This doesn't work anymore. It renders the complete require statement as string into the page. |
The The example is using typescript but of cause you can achieve the same with babel Webpack config: const HtmlWebpackPlugin = require("html-webpack-plugin");
const TsConfigWebpackPlugin = require("ts-config-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: "src/template.tsx"
}),
new TsConfigWebpackPlugin()
]
}; template.tsx //
// This is the entry file which is executed by the html-webpack-plugin
// during the webpack build
//
import React from "react";
import { renderToString } from "react-dom/server";
export default function() {
return renderToString(
<html>
<head />
<body>
<div id="main">
</div>
</body>
</html>
);
} For other template languages it works the same way - just add a loader to your webpack config and it will be used for your template file. Just make sure that your template returns one of the following:
|
Perhaps you didn't get me or probably I didn't get you :-) I am using My I usually put Importing from a tsx template is not a problem as it is JavaScript, but my template is pure html, where I put the The parsing of the template and the html import are done by your plugin. Aaaaa I hope you understand me better now ;-) |
This all works fine with the latest release version. But now I want to be able to tell the I cannot require a body.html inside of the layout template, the template is for all pages the same.
When I use the
|
Forget about everything. Here a related issue. layout.ejs |
As I tried to show with the tsx example you can use any loader. What you can do for example: Add the ejs-loader to your project and have the following about.html:
|
@jantimon so to explain the use case a little bit here - the plugin i set up to work based on html-webpack-plugin injects "partials" into the html pipeline. the big use case here is that you won't have to maintain a template file, instead, you simply define a partial file and where you want it to be added. this is particularly useful for something like a React app, where instead of having to redefine all of the import bits and pieces of the template itself requiring someone to maintain that through potential changes, they simply have to define this 1 partial with the required code that gets plugged in through the compile chain ive been trying to figure out though how to get this running in v4 and have been struggling with it a bit. im not super well versed in the webpack ecosystem, but previously, i was successfully able to simple string replace in the partial given the location and some regex magic which would allow the html-webpack-plugin to compile it as i needed it. now, i can't seem to find a good spot to plug that into. i found in any recommendations on a direction i could go here? i was considering trying to hook into some of the utils you make available, but when i was digging in, i couldn't really find anything public that would help me here. for instance, if there was a method publicly available that let me "compile" each individual partial file, effectively running your processing on the file resolving things like you can see some of the use cases im providing here: https://github.com/colbyfayock/html-webpack-partials-plugin/tree/master/examples any thoughts on this? |
and just to clarify, the injection process is working currently as expected, however, it doesn't resolve the requires |
Ok, I get your approach, it's like:
I like to keep it What I would like to be able to do: Like this for example:
Here we always reference the same Question is: |
Closed in favor of feature request |
In my project (static multi-page app) I have a custom html template.
This template should be my layout template which should serve as a basis for all pages.
Now instead of putting everything inside this template
layout+content
and copying this for every page I want to create, I want to be able to tell the plugin to load the specified content html page.Is this possible?
Something like this:
The layout.ejs:
The following does not work, I guess it first tries to parse and execute the
require
statements before injecting the template parameters${require('<%= contentUrl %>')}
So in the end I want to be able to specify a container and the respective content.html file.
The text was updated successfully, but these errors were encountered: