使用Webpack引入HTML模板片段

Question

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

因此，我正在使用HTML加载器，并尝试要求/导入其他HTML文件，但它们只显示为字符串在HTML中。 截图 存储库 如何使用html-loader包含HTML部分？（或者可能是另一种替代方法）

- Danny de Vries

---

你尝试使用像这里建议的 <%= require('html-loader!./text.html') %> 吗？（参考链接：https://dev59.com/sFgQ5IYBdhLWcg3w0HEA） - Piotr Adam Milewski

@PiotrAdamMilewski那篇帖子真的帮了我，我需要在webpack配置中设置插值选项。谢谢！也许有点不相关和广泛，但你知道其他可能的解决方案吗？或者A-Frame如何处理这个常见模式？ - Danny de Vries

关于常见的模式，你应该查看mixins和ngoKevin的模板component。 - Piotr Adam Milewski

Answer 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" %}

- ngokevin

---

@PiotrAdamMilewski 请查看一下。 - ngokevin