我喜欢基于组件的方法为不同的组件创建不同的文件夹。所以我目前有：
- components/
- heading/
- heading.css
- heading.js
- heading.html
我希望我的html看起来像下面的标题代码（包括引导和自定义css类）：
<body>
<div class="container text-white">
<div class="position-relative pb-5">
<h1 class="position-absolute top-0 start-50 translate-middle-x display-1">HEADING</h1>
</div>
</body>
我如何实现这一点？我是应该将这个HTML导入到JS（我使用的是webpack)，还是应该在创建两个div并将其追加到主体之后，在JS中手动添加这些类？我知道第二个选项是乏味的，但我不认为第一个选项将使标题可重用的其他页面。有没有我没有提到的更好的办法？
你的问题很难回答，因为什么是“更好的方法”取决于你的项目和你的目标是做什么。但是我认为您开始编码，所以您可能希望将Javascript代码导入到html heading.html页面中，对于css文件也是如此（使用引导程序不是一项义务，如果您学到了一些东西，直接使用css应该会更好、更高效）。Webpack将遵循您的操作和设置方式，提供一个或任何捆绑文件供服务器使用。它与您的项目配置方式无关。我的意思是，您可以只构建您的项目并在结束时关心webpack，或者直接配置webpack，然后开始您的项目（如果您想要一些用于CSS的拆分文件，您也可以为此配置webpack，并且还可以动态更新您的包文件），但这与您的问题无关。如果您的问题是“如何在主文件中导入一个html文件（假设是：头文件）”，那么您可以从Javascript代码中执行。然后，您可以为此选择html标记，或者使用ID。正如我告诉你的，对我来说，在模糊的问题上很难帮助你更多，因为它可以有很多不同的方法来实践成为“最好的方法”（而且“最好的”也可以是一种意见）。希望这对你有一点帮助。
