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.

Sign up for GitHub

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

Jump to bottom

Embed the script into HTML #1831

Open
andrzejlisek opened this issue Nov 10, 2023 · 6 comments
Open

Embed the script into HTML #1831

andrzejlisek opened this issue Nov 10, 2023 · 6 comments

Comments

@andrzejlisek
Copy link

andrzejlisek commented Nov 10, 2023 •
edited
Loading

I am trying to embed the JavaScript files into HTML file.

I have very simple example for test purposes

test.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8"> 
  </head>
  <body>
    <input type="button" value="SomeButton" onclick="testfn()">
    <script src="script.js"></script>
  </body>
</html>

script.js

function testfn()
{
    alert("hello world");
}

I expect, that I provide the HTML file name into Webpack, the webpack will detect the JS file and will generate this output standalone HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8"> 
  </head>
  <body>
    <input type="button" value="SomeButton" onclick="testfn()">
    <script>
function testfn()
{
    alert("hello world");
}
    </script>
  </body>
</html>

How to configure webpack to do this (package.json and webpack.config.js file)? I can not find, how to bundle such simple example.

The input HTML file is not an template. There is working page file.
@alexander-akait
Copy link
Collaborator

We can add an option for this, but why do you need this?

@andrzejlisek
Copy link
Author

why do you need this?

For achieve single HTML for use offline.

On some smartphones, if I run the HTML using file manager, in some cases, the file manager or browser copies the HTML into temp directory (I do not know, why) and the scripts being as separated files does not work.

Another case: Sometimes I develop the desktop applications, which have windows form containing the "webview" and I load some HTML into the webview. If the HTML file does need additional files, such as scripts, graphics, the file works correctly without creating temp files.

Some time ago, I completely and effectively solved this problem by creating very simple "bundler" https://github.com/andrzejlisek/SingleHtmlAppBundler , which I wrote in C# for .NET. This tool parses HTML, JavaScript files and merges into single file. In the params, I can set, which HTML tags will be merged, for instance, the scripts will be merged, but images will not be merged.

Later, a few people suggested me to use Webpack with HTML plugin instead of developing/using custom tools for solving such problem, because perhaphs WebPack can do the same merging with better results including minify (not only removing whitespaces) and other optimizations. I tried to do the same using Webpack, but I not achieved expected results.

@alexander-akait
Copy link
Collaborator

PR welcome

@dhdaines
Copy link

dhdaines commented May 7, 2024

It appears there is now a plulgin for this: https://github.com/icelam/html-inline-script-webpack-plugin

@axetroy
Copy link

axetroy commented Sep 19, 2024

Similarly, we also hope to be able to embed CSS.

This is very useful in some scenarios.

@alexander-akait
Copy link
Collaborator

Feel free to send a pr for this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@dhdaines @alexander-akait @axetroy @andrzejlisek