javascript - 使用 Webpack 包含 HTML 部分

Question

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

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

Screenshot

Repository

如何将 HTML 部分包含在 html-loader 中？ (或者另一种选择)

Answer 1

我使用 Nunjucks 并在我的 Webpack 中运行一个 watcher/builder。

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