Bundle HTML, JS, and CSS into one index.html file-CodePudding

Okay so quick overview, I'm using a C# console application to transform four XML files into a HTML document. This document will need to be shared around to a select few people (it isn't being hosted/isn't a web app, just a generated html file). Is there a way to bundle this one file with its javascript file and css file? Currently I just have them stored on the work file system and reference them directly in the html, which is fine for now, but ideally they would be packaged in some capacity.

From looking around, it seems webpack might be what I'm after, but this seems like such a simple problem that it feels like I'm overlooking something, and anything I search for seems to trip the algorithm with buzz words leading to bloated searches.

TLDR: I have a HTML doc, I want to share that doc without physically passing that person the CSS and JS file, nor do I want to host it on a web app. How can I package that file, in such a way, that when someone else opens it, they will see and be able to interact with the file as intended with the CSS and JS.

CodePudding user response：

I didn't understand your question, but if you want to merge the CSS and JS into the HTML, yes ofcourse it's possible.

To add CSS into HTML, you need to use , and to add JS you need to use

EXAMPLE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EXAMPLE</title>
</head>
<body>
  <p> test </p>
</body>
<style>
p {
color: violet
}
</style>
<script>
console.log('test complete');
</script>
</html>

CodePudding user response：

Instead of referencing your CSS and JS files, do the following:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">

<style>
/*Your CSS code here*/
</style>

<body>

    <script>
    //Your JS code here
    </script>

</body>

</html>