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

本文介绍了如何使用webpack将原始静态html文件包含到另一个html文件中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个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文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！