我想在 Webpack 捆绑期间将一些 HTML 从一个文件注入另一个文件。
假设我有一个 index.html 文件，如下所示：
//index.html
<html>
<head></head>
<body>
<p>Hello World</p>
</body>
</html>
和另一个带有一堆图标的文件：
//another.html
<symbol id="a" ...>...</symbol>
<symbol id="b" ...>...</symbol>
<symbol id="c" ...>...</symbol>
然后我希望我的“index.html”文件在运行 webpack 后看起来像这样：
//index.html in bundle
<html>
<head></head>
<body>
<symbol id="a" ...>...</symbol>
<symbol id="b" ...>...</symbol>
<symbol id="c" ...>...</symbol>
<p>Hello World</p>
</body>
</html>
基本上，我只想将文件中的任何内容包含在我的 index.html 正文中。我已经环顾了整个 webpack 生态系统，但我找不到任何可以做我想要的东西。
我现在拥有的 webpack 配置正在使用html-webpack-plugin：
{
....
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
inject: true,
})
],
}
有问题的文件取自我的一个依赖项，因此我无法在那里进行任何更改或手动复制内容，但我知道包含它们的文件夹的路径，所以我希望我可以使用加载程序/plugin 来为我处理这个问题。
问题：是否有一个 webpack 加载器/插件可以做到这一点？
我看到它的方式,它可以用作<div>容器的替代品,用于样式化组件.例:
@Component({
template: `
<div class="container">
<h1>Some Title</h1>
<p>Some Content</h1>
</div>
`,
styles: [`
.container {
border: 1px solid black;
display: flex;
}
`],
})
@Component({
template: `
<h1>Some Title</h1>
<p>Some Content</h1>
`,
styles: [`
:host {
border: 1px solid black;
display: flex;
}
`],
})
如果我理解正确,这两个解决了完全相同的问题.并且很少有一个元素和类可以在几乎每个组件中担心.
问题:这:host是针对的吗？如果没有,它的重点是什么,除了在任何地方添加容器之外,为组件提供样式的最佳实践是什么？
有没有办法强制严格使用enum？一些例子：
enum AnimalType {
Cat,
Dog,
Lion
}
// Example 1
function doSomethingWithAnimal(animal: AnimalType) {
switch (animal) {
case Animal.Cat: // ...
case Animal.Dog: // ...
case 99: // This should be a type error
}
}
// Example 2
someAnimal.animalType = AnimalType.Cat; // This should be fine
someAnimal.animalType = 1; // This should be a type error
someAnimal.animalType = 15; // This should be a type error
基本上，如果我说某个东西有一个enum类型，那么我希望 TypeScript 编译器（或 tslint）确保它被正确使用。对于当前的行为，我并不真正理解枚举的意义，因为它们没有被强制执行。我错过了什么？