使用 Webpack 包含 HTML 部分答案

【问题标题】：Include HTML partials with Webpack使用 Webpack 包含 HTML 部分
【发布时间】：2018-08-22 18:22:04
【问题描述】：

我正在创建一个 Webpack 样板来轻松创建 A-Frame 项目。我将 Webpack 配置为捆绑 JS 并包含 A-Frame 库。由于 A-Frame 严重依赖声明性 HTML，因此我想将实体作为 HTML sn-ps 包含在内，这样我就不会得到一个巨大的 index.html 文件。

所以，我正在使用 HTML 加载器并尝试要求/导入其他 HTML 文件，但它们只是在 html 中显示为字符串。

Screenshot

Repository

如何在 html-loader 中包含 HTML 部分？（或者可能是另一种选择）

【问题讨论】：

您是否尝试过像建议的here 那样使用<%= require('html-loader!./text.html') %>？
@PiotrAdamMilewski 那篇文章实际上帮助了我，我需要在 webpack 配置中设置 interpolate 选项。谢谢！也许有点无关和广泛，但你知道任何其他可能的解决方案吗？或者常见的模式是如何使用 A-Frame 处理的？
常用模式请查看mixins和ngoKevin的模板component

标签： javascript webpack aframe

【解决方案1】：

我使用 Nunjucks 并在我的 Webpack 中运行观察器/构建器。

var Nunjucks = require('nunjucks');
var webpack = require('webpack');

// Set up templating.
var nunjucks = Nunjucks.configure(path.resolve(__dirname, 'src'), {noCache: true});

// Initial Nunjucks render.
var html = nunjucks.render('index.html', getContext());

fs.writeFileSync('index.html', html);

// For development, watch HTML for changes to compile Nunjucks.
// The production Express server will handle Nunjucks by itself.
if (process.env.NODE_ENV !== 'production') {
  fs.watch('src', {recursive: true}, (eventType, filename) => {        
    if (filename.indexOf('.html') === -1) {
      return;
    }
    console.log(`${filename} updated.`);
    try {
      fs.writeFileSync('index.html', nunjucks.render('index.html', getContext()));
    } catch (e) {
      console.error(e);
    }
  });
}

// ...

我的树：

index.html  // Compiled HTML.
src/
  index.html  // Template/Nunjucks HTML.
templates/
  somePartial.html

然后包括：

{% include "./templates/somePartial.html" %}

【讨论】：

@PiotrAdamMilewski 看看