Question

有没有办法在使用webpack的另一部分内部包含html partial？我正在使用html-loader来执行此操作：

的index.html

<%= require('html-loader!./partials/_header.html') %>

但是当我尝试在_header.html中包含另一个部分时，它无法呈现它。

这不起作用：

_header.html

<%= require('html-loader!./partials/_nav.html') %>

Answer 1

我结合了一点，我找到了解决方案。

<强>的index.html

<%= require('html-loader?root=.&minimize=true&interpolate!./partials/_header.html') %>

然后在 _header.html

中

${require('html-loader?root=.!../partials/_nav.html')}

Answer 2

将html-loader与interpolate选项一起使用。

https://github.com/webpack-contrib/html-loader#interpolation

{ test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

然后在html页面中你可以导入部分html和javascript变量。

<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
  <!-- Importing navbar -->
  ${require('./partials/nav.html')}
  <!-- Importing variable from javascript file -->
  <h1>${require('../js/html-variables.js').hello}</h1>
  <!-- Importing footer -->
  ${require('./partials/footer.html')}
</body>
</html>

html-variables.js看起来像这样：

const hello = 'Hello!';
const bye = 'Bye!';

export {hello, bye}

您还可以使用${require('path/to/your/partial.html')以相同的方式在其他部分中包含部分内容。

唯一的缺点是你不能像HtmlWebpackPlugin那样从<%= htmlWebpackPlugin.options.title %>导入其他变量（至少我找不到导入它们的方法），只需写下你的html中的标题，或者如果需要，可以使用单独的javascript文件来处理变量。

Webpack：包含html部分内部另一部分？

2 个答案: