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时，您将使用不同的loaders，它们可以根据文件的文件类型对文件执行不同的操作。

您可以做的是：

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

  

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

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

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

Answer 2

一种替代方法是使用Parcel，它支持将HTML文件作为 。