如何自动将 JS/CSS 添加到 HTML 文件中？答案

【问题标题】：How to automatically add JS/CSS to HTML files?如何自动将 JS/CSS 添加到 HTML 文件中？
【发布时间】：2015-02-02 17:47:40
【问题描述】：

有没有办法让 Webpack 扫描 Javascript 文件中的 require("file.js") 和 require("file.css") 并将 <script type="text/javascript"> 和 <link rel="stylesheet">（分别）插入到包含根 Javascript 文件的任何 HTML 文件中？

例如。给定：

Main.html

<html>
    <head>
        <script type="text/javascript" src="main.js"></script>
[...]

Main.js

require("./login.js");
require("./login.css");

我希望得到这个输出：

Main.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="login.css"/>
        <script type="text/javascript" src="login.js"></script>
        <script type="text/javascript" src="main.js"></script>
[...]

加分项：能够require("login.scss") 并以<link rel="stylesheet" type="text/css" href="login.css"/> 结束（意思是，考虑到 SCSS 文件将被转换为 CSS 的事实）。

【问题讨论】：

标签： html webpack

【解决方案1】：

根据Webpack作者的说法，这个功能还不存在。

我已提交此功能请求：https://github.com/webpack/webpack/issues/754

【讨论】：

【解决方案2】：

我创建了一个小 Python 脚本，允许我将文件（.js、.css、.younameit）从目录导入到 html。

之前：

<html>
    <head>
    <!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
    </head>

之后：

<html>
   <head>
     <script src="../tsc_out/script1.js"></script>
    <script src="../tsc_out/script2.js"></script>
    <script src="../tsc_out/script3.js"></script>
    <script src="../tsc_out/script4.js"></script>
    <script src="../tsc_out/script5.js"></script>
  </head>

https://github.com/seven-jerry/html-importer

【讨论】：

仅链接的答案不受欢迎，因为链接可能会损坏。请尝试总结此处链接中的相关部分。如果需要，用户可以转到该链接以获取更多信息。