HTML 作为 Webpack 入口点答案

【问题标题】：HTML as Webpack entry pointHTML 作为 Webpack 入口点
【发布时间】：2019-03-09 21:34:40
【问题描述】：

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

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

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

有没有办法从HTML开始解析js、css、图片等需要的东西？

我应该直接废弃使用 webpack 并使用 gulp 编译 typescript 和 sass 吗？

【问题讨论】：

您的目标是使用 Web 框架，还是现在只是普通的 JavaScript、CSS 等？框架（例如 Angular）有时带有内置的 webpack 支持。
另外，你想用 webpack 解决什么具体问题？
主要是自动化构建过程，例如编译 typescript 和 sass、缩小图片等。 Gulp 能做到这一点，但 webpack 能做到这一点，而且更多，所以我认为它可能是一个更好的学习工具

【解决方案1】：

另一种选择是使用Parcel，它支持将HTML 文件作为条目。

【讨论】：

【解决方案2】：

严格来说，你不能为整个应用程序做你要求的事情

[使用] HTML 作为 Webpack 入口点

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

使用 Webpack，您将使用不同的 loaders，它们能够根据文件类型对文件执行不同的操作。

你可以做的是：

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

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

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

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

【讨论】：