问题描述
我喜欢为不同的组件创建不同文件夹的基于组件的方法。 所以我目前有：
- 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），还是应该在创建并将两个 js 附加到正文后在 div 中手动添加这些类？
我知道第二个选项很乏味，但我认为第一个选项不会使标题可重用于其他页面。有没有我没有提到的更好的方法？
解决方法
您的问题很难回答，因为什么是“更好的方法”取决于您的项目以及您的目标是做什么。 但我认为你开始编码了，所以你可能想在你的 htmlheading.html 页面中导入你的 Javascript 代码，你的 css 文件也是如此（使用 Bootstrap 不是必须的，如果你学到了一些东西，直接使用 CSS 应该更好且高效）。 Webpack 只会按照您的操作以及您将其设置的方式来提供一个或任何捆绑文件以供您的服务器使用。它与您的项目配置方式无关。我的意思是，你可以只构建你的项目并在最后关心 webpack，或者直接配置 Webpack 并开始你的项目（如果你想要一些 CSS 的拆分文件，你也可以为此配置 Webpack，也可以动态更新你的包的文件。但这与您的问题无关。 如果您的问题是“如何在主文件中导入 html 文件（比方说：标题的文件）”，那么您可以通过 Javascript 代码来完成。然后，您可以为此选择 html 标记，或使用 id。 正如我告诉过你的，对我来说，很难用模糊的问题来帮助你，因为可以有很多不同的练习方式来成为“最好的方式”（而且“最好的”也可以是一种意见）。 希望对你有所帮助。