我在一个静态网站项目工作,现在必须添加多个页面使用相同的页眉和页脚。我试图通过将header.html
和footer.html
文件转换为部分文件来实现这一点。
我已经将我的webpack.config.js
设置为使用HtmlWebpackPlugin
,其中模板是index.html
文件。
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
]
字符串
我还调用了index.html
文件中的partials,如下所示:
<body>
<%= require('html-loader!./partials/header.html').default %>
<%= require('html-loader!./partials/home.html').default %>
<%= require('html-loader!./partials/footer.html').default %>
</body>
型
这对索引文件有效。但是现在我必须添加一个portfolio.html
页面并重用页眉和页脚。当我以同样的方式调用分部时,它们在HTML页面上呈现为字符串
的数据
有人能帮我一下吗?我不知道如何在其他html页面中重用这些部分。
1条答案
按热度按时间ne5o7dgx1#
问题与
html-loader
无关。您没有使用html-webpack-plugin
来处理portfolio.html
文件。这个插件默认使用ejs/lodash模板来处理特殊的模板标签<%= >
。请参见生成多个HTML文件:
要生成多个HTML文件,请在plugins数组中多次声明插件
例如:
项目结构(建成后):
字符串
src/index.html
:型
src/portfolio.html
:型
src/partials/header.html
:型
src/partials/footer.html
:型
src/partials/home.html
:型
webpack.config.js
:型
构建日志:
型
输出
dist/index.html
:型
dist/portfolio.html
:型
package.json
:型