Question

我有一个header.html文件

<header>
  <nav>
    ... some code here ...
  </nav>
</header>

我也想在其中包含这个header.html的地方有一个index.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文件吗？

Answer 1

您需要像这样启用@echo off Rem set the path of the photo directory Set dirP= C:\Biometric\photos Rem set the path for the mindtct Set dirM= "C:\Rel_5.0.0\mindtct\bin\"mindtct.exe Set image="*.png" for %%A in image do( START dirM dirP C:\Biometric\Data )：

interpolation

我的答案的来源this question/answer。

Answer 2

请注意，在html-loader v1.0.0中删除了interpolate选项。该解决方案适用于html-loader v0.5.5和$ {require（'./ header.html'）}

如何使用webpack将原始静态html文件包含到另一个html文件中

2 个答案: