我有一个 header.html 文件
<header>
<nav>
... some code here ...
</nav>
</header>
我也有一个 index.html 文件，我想在其中包含这个 header.html。
我的 index.html 看起来像这样:
<body>
${require('./header.html')}
<div class="content">
<!-- some content here -->
</div>
<div class="footer">
<!-- some content here -->
</div>
</body>
我正在使用这个 webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: ['./src/js/index.js', ...],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/index.js'
},
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/main.html',
filename: 'main.html'
})
]
};
我试着像这样包含 header.html:
${require('./header.html')}
还有这个:
<%= require('./header.html') %>
试图用这一行导入 js/index.js 文件:
import header from 'html-loader!../header.html';
...结合这个:
${require('./header.html')}
还有这个:
${require(header)}
但没有任何效果。我只是将我的 ${require ...} 代码作为纯文本返回到 index.html 中，不包含任何内容。
知道如何包含 header.html 文件吗？
最佳答案
编辑:这个答案对于 html-loader > 0.5.5 不再有效
您需要像这样启用插值:
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
interpolate: true
}
}
}
]
},
我的答案来源，this question/answer .
关于html - 如何使用 webpack 将原始静态 html 文件包含到另一个 html 文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51527619/