javascript - 如何在 HTML 文件中捆绑每个外部和内联 JS 脚本

Question

我目前有一个项目，其中包含数百个外部和内联 JS 类。

索引.html：

<script src="./src/thing1.js></script>
<script src="./src/thing2.js></script>
<script src="./src/thing3.js></script>
...
<script src="./src/thing305.js></script>
<script>
   var exScript1 = "test";
</script>
<script>
   var exScript2 = "test";
</script>
...
<script>
   var exScript302 = "test";
</script>

将所有这些外部和内联脚本捆绑到单个脚本或内联 HTML 文件中的最简单方法是什么？

注意：Webpack 等采用 javascript 入口点，因此我必须将每个文件都列为入口点，这是不可能的。

标签： javascripthtmlwebpackbundle

Answer 1

您可以有一个 JS 将这些附加到 DOM：

<script>
const jsBundleUrls = [
  // this contains the URLs of all bundles
  "src/thing1.js",
  "src/thing2.js",
  // etc
];

isBundleUrls.forEach(src => {
  const el = document.createElement("script");
  el.src = plugin.src;
  el.async = true;

  document.body.appendChild(el);
});
</script>