如何使用webpack将原始静态html文件包含到另一个html文件中 [英] How to include raw static html file into another html file with webpack
问题描述
我有一个header.html文件
<header>
<nav>
... some code here ...
</nav>
</header>
我在想要包含此header.html的地方也有一个index.html文件.
And I have an index.html file too where I want to include this header.html.
我的index.html看起来像这样:
My index.html looks like this:
<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:
I tried to include header.html like this:
${require('./header.html')}
这也是:
<%= require('./header.html') %>
试图通过以下这一行导入js/index.js文件:
tried to import in js/index.js file with this line:
import header from 'html-loader!../header.html';
...与此结合:
${require('./header.html')}
和这个:
${require(header)}
但是没有任何作用.我只是将我的${require ...}代码以纯文本的形式返回给index.html，没有包含任何内容.
but nothing work. I just give back my ${require ...} code as plain text in index.html, and nothing included.
有什么想法要包含header.html文件吗?
Any idea how to include the header.html file?
推荐答案
对于html-loader> 0.5.5
This answer is not valid anymore with html-loader > 0.5.5
您需要像这样启用interpolation:
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
interpolate: true
}
}
}
]
},
我的答案的来源，此问题/答案.
这篇关于如何使用webpack将原始静态html文件包含到另一个html文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
