javascript - 用于将静态 JSON 对象附加到输出的 Webpack 插件

Question

我正在尝试编写一个 webpack 插件，该插件将进入包含 html 文件的目录，打开每个文件，删除新行，并生成一个对象作为静态属性附加到我的输出文件（这是一个 var）。

该对象看起来像：

{
  htmlFile1: '<p>some html one!</p>',
  htmlFile2: '<span>some html two!</span>
}

然后我希望它附加到我的输出中，例如：

App.templates = { .... }

对象的创建完成。我只是在努力使用 webpack 并弄清楚如何将它附加到主要对象。我应该将它写入磁盘并要求它吗？或者有没有办法通过插件将它添加到包中？

我正在使用 Rivets.js 作为模板引擎，但我还没有找到任何可以做这样的事情的东西。

另外值得注意的是，我使用的只是 webpack 和 npm。没有咕噜声/吞咽/等

非常感谢！麦克风

Answer 1

您可以使用 webpackrequire.context将目录中的所有 html 文件作为文本导入，处理文本并将结果导出为单个对象：

const requireTemplate = require.context('./templates', false, /\.html$/);

module.exports = requireTemplate.keys().reduce((templateMap, templatePath) => {
  const templateName = templatePath.match(/\/(\w*?)\.html/)[1]; // get filename without path and extention
  templateMap[templateName] = require(templatePath);
  return templateMap;
}, {});