How can I provide parameters for webpack html-loader interpolation?

[547377507]

require("html?interpolate=require!./file.ftl");

<#list list as list>
${list.name}
</#list>

${require('./components/gallery.html')}

Where does "list" come from? How can I provide parameters to the interpolation scope?

I would like to do something like template-string-loader does:

var template = require("html?interpolate!./file.html")({data: '123'});
and then in file.html

${scope.data}

But it doesn't work. I have try to mix the template-string-loader with the html-loader but it doesn't works. I could only use the template-string-loader but then the images in the HTML are not transformed by webpack.

Any ideas? Thank you

[michael-ciniawsky]

@547377507 Currently not possible sry, I'm working on #120 for the next major of this loader, the README example is misleading here, it only shows that if ?interpolate=require other ${} stay unaffected in case you deal with them otherwise somehow 😛 . I took a quick look at the template-string-loader source and it does exactly, what I want to add to html-loader in the near future. Having it in html-loaderis the better option, since you can import a template function into your components js|jsx|ts|tsx directly and call it when needed, but for now you can send PR to template-string-loader if you want :)

template-string-loader/index.js

import { getOptions } from 'loaderUtils'

module.exports = function (html) {
   const options = getOptions(this) || {}
   // html-loader etc following
   if (this.loaderIndex > 0) {
      const template = ($) => `${html}`
      return template(options.locals)        
   }
   // direct export to webpack as a module
   return 'module.exports = function ($) { return `${html}`};'
}

[547377507]

Thank you

[machsix]

Is there any update on this? I found https://github.com/deepsweet/mustache-loader, which seems to achieve the goal. But I would like to stick with ES6 syntax

[denis-migdal]

Is there any update on this? I found https://github.com/deepsweet/mustache-loader, which seems to achieve the goal. But I would like to stick with ES6 syntax

Hi, I just created a package that might do what you are asking:
https://github.com/denis-migdal/prehtml-loader

I will create a new issue in this repository to talk about it.