Html Webpack插件 - 如何导入页眉/页脚HTML部分到正文模板中 [英] Html Webpack Plugin - How do you import headers/footer html partials into body template
问题描述
我试图找出一种方法，你可以有一个索引文件，当编译时将全局页眉和页脚加载到index.html文件中，所以我不必每次都添加它。
I'm trying to figure out a way where you can have an index file that when compiled loads the global header and footer into the index.html file so I don't have to add this every time.
目前，这是创建我的index.html文件的原因：
At the moment this is what creates my index.html file:
new HtmlWebpackPlugin({
title: 'Typescript Webpack Starter',
template: '!!ejs-loader!src/index.html'
}),
它将JS加载到主体中，并将CSS放在头部中，但是我想知道是否可以执行下面的操作（就像模板引擎一样）
It loads the JS in the body and the css in the head fine but I'm wondering if I can do something like the below (just like a template engine would)
<body>
{{HEADER GETS IMPORTED HERE}}
<p>Success your page has loaded</p>
<button class="button">Button</button>
{{FOOTER GETS IMPORTED HERE}}
</body>
让我知道您的想法
Let me know your thoughts
推荐答案
根据官方文档：您可以实现。
如果您已经有模板加载器，则可以使用它来分析模板。请注意，如果您指定了html-loader并使用.html文件作为模板，也会发生这种情况。
If you already have a template loader, you can use it to parse the template. Please note that this will also happen if you specifiy the html-loader and use .html file as template.
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs'
})
]
这篇关于Html Webpack插件 - 如何导入页眉/页脚HTML部分到正文模板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
