Using webpack to replace a button in a HTML template - javascript

I am a new to webpack, and have a problem.
my project catalogue is the following:
--webpack/
--components/
--button/
-button.css
-button.js
-button.html
--entry.js
--entry.html
--dist/
--js/
--css/
index.html
I want to compile button/ into entry.html, then entry.html generates index.html by string replace .output catalogue is dist/ .
entry.html like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
{{button}}
</body>
</html>
As you can see, I want to use webpack to replace {{button}} by the button.html;
I don't know How to write webpack.config.js. Can anybody help me out?
big thx !

Webpack is not meant to do that kind of task.
What you want is probably a templating engine, like Handlebars.js, with an appropriate loader, handlebars-loader.
Then you can configure your loader to process the template files the way you want.

Related

How to import a blazor custom element in another JS application?

I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>

How to add script to head tag in MkDocs?

I am new to MkDocs and I built up a website using MkDocs and I want to add some script into <head>...</head>.
I tried this code at top of my markdown file but it didn't work :
<head>
<script>
...
</script>
</head>
I found the script would show in <body>...</body> rather than in <head>...</head>.
How to place <script> in <head> tag?
You can use material. in your theme (mkdocs.yml), add a reference to custom dir, and in that dir, you can add a file named main.html which will be included in the "head" part
See https://squidfunk.github.io/mkdocs-material/customization/#overriding-partials for more details.
Assuming your are using MkDocs Material as your Theme, inside your mkdocs.yml you can add Entries to the extra_javascript List.
mkdocs.yml:
site_name: "..."
theme: "..."
# ...
extra_javascript:
- https://cdn.someCdn.someLibrary.js # Online Resource
- js/ourJsFile.js # Path relative to "docs" Directory
# Works the same way for CSS!
extra_css:
- css/someCSS.css # Again, relative to the "docs" Directory
For reference: https://squidfunk.github.io/mkdocs-material/customization/#adding-assets
The extrahead placeholder, which should be present in all themes, allows additions to be made to the <head>.
You need to specify a custom_dir in the YAML file and in this directory have a main.html with an extrahead block.
See:
https://www.mkdocs.org/user-guide/customizing-your-theme/#using-the-theme_dir
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://file.js"></script>
</head>
<body>
{{ content }}
</body>
</html>

Vue CLI - combine build output to a single html file

I have a vue project created with vue-cli. The normal output when running yarn build is a dist folder with an index.html and a js and css sub-directory with the corresponding .js and .css files.
I want the build output to be a single html file that contains the js and css.
I added a vue.config.js file in the root of my project and set it to output a single js file and that is working ok. But I want to only have a single html file with the js and any css already on the html file.
module.exports = {
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false
}
}
}
Basically I want my html file to be something like this:
<html lang=en>
<head>
... meta tags
<title>my title</title>
</head>
<body>
<div id=app></div>
<script>
// contents of the output js file here
</script>
</body>
</html>
Is this possible?
Using Vue 3.9.3
Someone answered with a suggestion to look into html-webpack-inline-source-plugin but removed their answer. But that was exactly what I needed to get this done.
The plugin is not Vue or Vue-CLI specific but it works if you do the following:
1) Add a vue.config.js file in the root of the app.
2) The linked plugin above is actually an extension of another package. You need both.
npm install --save-dev html-webpack-plugin
npm install --save-dev html-webpack-inline-source-plugin
3)
// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false // makes there only be 1 js file - leftover from earlier attempts but doesn't hurt
},
plugins: [
new HtmlWebpackPlugin({
filename: 'output.html', // the output file name that will be created
template: 'src/output-template.html', // this is important - a template file to use for insertion
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
]
}
}
4) Add a template. This is necessary for working in the Vue context because without this the output html file by default won't have the necessary <div id="app"></div> and Vue won't mount to anything. I basically took the normal output html file and modified it a little.
<!-- output-template.html -->
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>example title</title>
</head>
<body><noscript><strong>We're sorry but my example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app>
</div>
<!-- plugin will insert js here by default -->
</body>
</html>
Then build like normal and the output.html file will be in the /dist folder

Can I use gulp to insert content from a file into another file?

I have an index.html and a header.html. What I would like to do is to have a gulp task that takes the text from the header.html and inserts it into the index.html. So for example:
header.html
abcdef
ghijkl
index.html before insertion
line1
line2
<!-- header:start -->
...
...
...
<!-- header:end -->
line3
index.html after insertion
line1
line2
<!-- header:start -->
abcdef
ghijkl
<!-- header:end -->
line3
line4
Can anyone help me and give me some advice how I can do this?
What your after is definitely achievable. The quickest and easiest is probably to use a well known tempting solution like https://www.npmjs.com/package/gulp-mustache & http://mustache.github.io/mustache.5.html
which would look something like
src/routes/index.html
<html>
{{> ../partials/head.html }}
</html>
src/partials/head.html
<head>
<link .... />
<somethingelse>
</head>
gulp file
gulp.src("./src/routes/*.html")
.pipe(mustache()).pipe(gulp.dest("./dist"));
should hopefully produce
dist/index.html
<html>
<head>
<link .... />
<somethingelse>
</head>
</html>
although i have not tried these snippets exactly, i think it should convey the ideas :)
to do with pure JS & gulp would also be possible, it would probably require a custom stream processor and some sort of search replace etc. but unless you have a reason not to use external dependencies i would suggest the tempting library approach as you will install gain much more functionality (looping, etc )

Require js not loading jquery

I am a newbie to require js and faced this strange problem while creating our first :
Following is the home page :index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My first JS app using require</title>
</head>
<body>
<strong> This is my first require js app</strong>
<span id="output"></span>
</body>
<script data-main="js/main" src="js/lib/require.js"></script>
</html>
main.js is as follows :
require(['lib/jquery','app/message'],function($,message){
$('#output').html(message);
});
message.js is as follows :
define(function(){
return "Message from message.js";
});
When i run index.html on browser, $ in main.js comes as undefined. It does not produce any other error on console. Also all files are loaded successfully(confirmed from networks tab in browser).
If i change the main.js to be as follows :
require(['jquery','app/message'],function($,message){
$('#output').html(message);
});
And accordingly place jquery.js in appropriate directory, everything works fine.
I am not able to figure out the reason here. Can anybody please help here. Thanks in advance.

Categories

Resources