Embed the script into HTML

andrzejlisek commented 10 months ago

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 commented 9 months ago

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

andrzejlisek commented 9 months ago

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 commented 9 months ago

PR welcome

dhdaines commented 4 months ago

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

axetroy commented 1 day ago

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

This is very useful in some scenarios.

alexander-akait commented 23 hours ago

Feel free to send a pr for this

jantimon / html-webpack-plugin

Embed the script into HTML #1831