使用Webpack包含HTML部分

Question

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

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

截图

知识库

如何使用html-loader包含HTML部分？ （或者另一种选择）

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