Как включить необработанный статический HTML-файл в другой HTML-файл с помощью веб-пакета

У меня есть 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?

Источник

1 ответ

Решение

Вам нужно включить interpolation как это:

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

Источник для моего ответа, этот вопрос / ответ.

Источник

Обратите внимание, что опция интерполирования была удалена в html-loader v1.0.0. Решение работает с html-loader v0.5.5 и ${require('./header.html')}

Источник
Другие вопросы по тегам