将 HTML、JS 和 CSS 捆绑到一个 index.html 文件中

Question

好吧，这么快速的概述，我正在使用 C# 控制台应用程序将四个 XML 文件转换为一个 HTML 文档。此文档需要与 select 少数人共享（它不是 hosted/isn 网络应用程序，只是生成的 html 文件）。有没有办法将这个文件与其 javascript 文件和 css 文件捆绑在一起？目前我只是将它们存储在工作文件系统中并直接在 html 中引用它们，目前这很好，但理想情况下它们会以某种容量打包。

环顾四周，似乎 webpack 可能就是我所追求的，但这似乎是一个如此简单的问题，以至于我感觉我忽略了一些东西，而且我搜索的任何东西似乎都会让算法出错导致膨胀搜索的词。

TLDR： 我有一份 HTML 文档，我想分享该文档，但不想亲自将 CSS 和 JS 文件传递给那个人，也不想我想将它托管在网络应用程序上。我如何打包该文件，以便当其他人打开它时，他们将看到并能够按照预期与 CSS 和 JS 进行交互。

Answer 1

我不明白你的问题，但如果你想将 CSS 和 JS 合并到 HTML 中，当然可以。

要将CSS添加到HTML，您需要使用，添加JS您需要使用

示例：

<!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>

Answer 2

不要引用您的 CSS 和 JS 文件，而是执行以下操作：

<!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>

将 HTML、JS 和 CSS 捆绑到一个 index.html 文件中

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

html

javascript

css

c#

webpack