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

Question

我有一个 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)}

但没有任何效果。我只是在 index.html 中以纯文本形式返回我的 ${require ...} 代码，没有包含任何内容。

知道如何包含 header.html 文件吗？

Answer 1

编辑：此答案不再有效 html-loader > 0.5.5

您需要像这样启用 interpolation：

  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            interpolate: true
          }
        }
      }
    ]
  },

我的回答来源，this question/answer。

Answer 2

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

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

How to include raw static html file into another html file with webpack

html

webpack

webpack-html-loader