Question

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

该对象看起来像：

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

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

App.templates = { .... }

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

我正在使用Rivets.js作为模板引擎，而且我还没有找到任何类似的东西。

另外值得注意的是，我正在使用的是webpack和npm。没有Grunt / Gulp / etc

非常感谢！麦克

Answer 1

您可以使用webpack的require.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;
}, {});

Webpack插件将静态JSON对象附加到输出

1 个答案: