Using html-webpack-plugin with web pack,
Can create or generate a index.html file
Can use template to generate a index.html file
But I want to inject the bundled JS and CSS file to another existing html file.
I didn't find any options to do that in the plugin.
We have Asp.net MVC _layout.html.
If I go with the template option, the contents from _layout.html are broken since more code in _Layout.html are html mixed with c#.
Do we have any option to replace content without breaking or add bundled file to existing html file?
Set your html file as template.
template: 'path / to / template / index.html'
Your template extends the basic plugin template.
You can freely modify the template, which is defacto your file e.g. index.html modified by the plugin.
Related
WebPack can bundle HTML files and output from the src directory to the dist directory../src/index.html to ./dist/index.html We know this is a static HTML file, but when I use it in my PHP project, it will need to change the index.html to index.php file. Also, I need to change or customize all of the static content to PHP logic or dynamic content. My question is if I need to add a new section or edit something in my main HTML file then I will need to change on ./src/index.html file from the src folder, then WebPack will do bundle again and make an ./dis/index.html file to the dist directory. Then again need to change the same process for the PHP files and change in PHP file for dynamic content.Should I use the PHP file in the src directory and use here PHP functions, logic or something else or dynamic content? Then bundle finally for distribution or final file to dist directory as ./src/index.php file ./dist/index.php
Have any way for use PHP finalize for render/bundle to for distribution?
I'm looking into migrating a large, homegrown build script for one of our projects to webpack.
One feature it has is it traverses a /views directory and copies the contents of the html files into a main index.html file. This allows us to easily use KnockoutJS's templating feature without putting everything in one file ourselves. Something like this:
for relative_path, full_path in walk(os.path.join(base, "views")):
with open(full_path) as f:
index.append("""<script type="text/html" id="{0}">""".format(relative_path))
index.extend(f)
index.append("</script>")
Ideally, I'd like to be able to do something like require('./views') and have it embed each .html file as <script type="text/html" id="views/foo">...</script>, injecting the text into the script tag and setting the id to the filepath. We have almost 100 different templates, so I'd like to avoid require()ing them individually.
Can I configure html-loader or html-webpack-plugin to do this? I'm wondering if I'll have to write my own webpack plugin or if there's a way I can configure an existing plugin to do what I want.
Thanks!
I think you can accomplish this using require.context and the html loader.
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
// requires and returns html files in the views directory
var modules = requireAll(require.context("./views", true, /^\.html$/));
modules.forEach(function(htmlTemplate){
// code to add each template to document.body
}
I am writting a github gh-page index.html:
Is it possible with some javascript, to import the ReadMe.md from a link and send it to the markdown javascript formatter (i think thats the file) of github and append the output somewhere in the index.html?
I am new to javascript and html.
I want to move tag script content in template to a .js file(e.g. in this way, I can use JSHint, whatever) and put it into template directory.
I found the document that said it can treat .js file as a static file, so I must run python manager.py collectstatic every time when I deploy my .js file to server(because I need debug my js code). That is very trivial.
I want to put my .js file and template file which including the .js together, so how to do it?
You can use the --link option in collectstatic to symlink your files rather than copying. That means you only need to run collectstatic again when you are adding a completely new static file, since updates to existing ones will be automatically seen via the symlink.
I add this line in my template file (e.g. template file is path/to/foo.html):
<script>{% include "path/to/send_bill.js" %}</script>
so it include .js file and add into template .html file as origin, but I can modify my .js file separately!
I don't know is there some side effect?
#Daniel Roseman your solution is very graceful.
I generated a Scalatra project using the standard instructions (using giter8).
I've created a AngularJS frontend with an index.html that I've placed at WEB-INF/views/index.html. It can see the html, but I can't get Scalatra to see the javascript.
I'm routing to the html using:
get("/") {
contentType="text/html"
new java.io.File(servletContext.getResource("/WEB-INF/views/index.html").getFile)
}
Currently the javascript and bower stuff is sitting in a subfolder of the views folder. How do I get Scalatra to use it?