如何自动添加 JS/CSS 到 HTML 文件？

Question

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

例如。给定：

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 的事实） .

Answer 1

根据Webpack作者的说法，目前还没有这个功能

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

Answer 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

如何自动添加 JS/CSS 到 HTML 文件？

How to automatically add JS/CSS to HTML files?

html

webpack

Main.html

Main.js

Main.html