2

我有一个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 文件吗？

4

2 回答 2

3

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

您需要interpolation像这样启用：

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

我的答案的来源，这个问题/答案。

于 2018-07-28T07:53:34.500 回答
2

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

于 2020-03-20T10:02:47.653 回答