Process images in .hbs

[brightpixels]

Hello, I need to compile hbs files to html at build time which is plugin is doing. However, it doesn't process the images. Anyway to ensure webpack processes the images founds in the handlebars files? Using the loader version of this plugin isn't an option as I need the hbs to be compiled at build time (this is a similar question to mine https://github.com/sagold/handlebars-webpack-plugin/issues/23).

[sagold]

Hi brightpixels.

Sorry, im short in spare time right now. Just as a side note: the mentioned loader does compile the hbs-files on build time, too.

[brightpixels]

Thanks. I didn't realise the other one works at build time as well!

[jakeols]

If anyone else is struggling with this, it's pretty straightforward with node-html-parser Ex:

      onBeforeSave: function (Handlebars, html, f) {
        const root = htmlParser.parse(html);
        let img = root.querySelectorAll("img");

        img.forEach((img) => {
          const str = img.rawAttrs;
          const regex = /src=['"](.*?)['"]/;
          const imgVal = regex.exec(str)[1];

          const src = paths.src + "/" + imgVal.replace(/\.\.\//g, "");
          const tgt = module.exports.output.path + "/" + imgVal.replace(/\.\.\//g, "");
          fs.copyFileSync(src, tgt);
        });
        return html;
      },