HTML 作为 Webpack 入口点

Question

首先，我对 Web 开发完全陌生，所以如果我的方法完全错误，请直说。

我想自动构建 sass 和 ts 文件，所以我阅读了Gulp/Webpack，似乎 webpack 是要走的路。

我正在构建一个简单的单页网站，现在我只需要一个小的 javascript，所以在我看来，webpack 的入口点应该是 html 文件本身是有道理的。但是，所有的文档和教程都只讨论从.js.

有没有办法从 HTML 开始解析 js、css、图像和其他需要的东西？

我应该只使用 webpack 报废并使用 gulp 来编译打字稿和 sass 吗？

Answer 1

严格来说，你不能按照你对整个申请的要求去做

[使用] HTML作为Webpack入口点

HTML 文件无法引用硬盘驱动器中的本地文件（有模板系统，但这是另一回事）。HTML 文件由服务器提供服务，并且只能引用远程文件。

使用 Webpack，您将使用不同的加载器，这些加载器能够根据文件的文件类型对文件执行不同的操作。

你能做的是：

• 如果您使用模板库或 HTML 导入，请使用 HTML 作为其他 HTML 文件的 Webpack 入口点
• 使用 JS 文件作为所有 JS 文件的 Webpack 入口点（通常是 index.js）
• 然后，两个输出都被放置在一个dist文件夹中，并且 HTML 输出将引用您的 JS 输出，但不使用相对或绝对路径（磁盘），它将使用远程资源定位器来完成。这些标准是统一资源定位符，即 URL（相对 URL）。请原谅过于详细（迂腐）的描述，我只是想尽可能清楚地解释这一切背后的原因。

但是，所有文档和教程都只讨论从 .js 开始。

对于简单的网站（例如单页网站），通常 HTML 根本不经过任何预​​处理。而且，在构建步骤中采取的唯一操作是将文件从 移动src到dist，这就是为什么教程倾向于关注 JS 方面。

从您的项目描述来看， html-loader似乎是您开始尝试的好地方，它支持常见功能，例如缩小、解析图像路径等。