Dynamic routes not parsed

[raypatterson]

Hi,

I have a configuration using underscore-template-loader and I cannot seem to get it to parse any routes that are created dynamically with this plugin.

By that I mean, if I create a non-dynamic image tag:

<img src="/test-1.jpg" />

The file-loader discovers, loads and emits the asset, however if I create the tag like so:

<img src="<%= htmlWebpackPlugin.image.src %>" />

The asset is not discovered by the file loader.

As an aside, the following works:

<img src="<%= require('/test-1.jpg') %>" />

But using a variable produces an error:

<img src="<%= require(htmlWebpackPlugin.image.src) %>" />

My configuration for the template loader looks like:

webpackConfig.module.loaders.push({
    test: /\.ejs$/i,
    loader: 'underscore-template',
    query: {
        root: cfg.dir.source,
        parseDynamicRoutes: true,
        attributes: [
            'img:src'
        ]
    }
});

A post loader will not work as the template is not rendered until it reaches the plugin. I can inspect the rendered HTML within the html-webpack-plugin-after-html-processing event handler but I'm not sure what to do with it at that point since it's already passed though the loader pipeline.

In order to get this far I referenced the following issues:

1. using image assets #71
2. html-loader won't work properly #133
3. questions about html-loader #174
4. lodash template parsing and html-loader #182
5. The ejs file has a img element, look like url-loader don't loader it #275

Please let me know if I'm missing something or if I can provide some more information.

Thanks

[jantimon]

The require part is done by webpack so it inherits all features and limitations of webpacks require.

What you could try is the following:

https://webpack.github.io/docs/context.html

<%= require.context("./assets/", true, /^\..*\.jpeg$/)(htmlWebpackPlugin.image.src) %>

Which would basically require all images but use only the one of your variable.

[raypatterson]

Thanks for the suggestion. Ideally I'd like to keep webpack syntax out of the template.
Right now I'm looking for a way to add a resource during one one of the plugin events.

I unsuccessfully tried:

function HtmlInspect() {}
HtmlInspect.prototype.apply = compiler => {
  compiler.plugin('compilation', compilation => {
    compilation.plugin('html-webpack-plugin-before-html-generation', (htmlPluginData, callback) => {
        let assetJson = JSON.parse(htmlPluginData.plugin.assetJson);
        assetJson.push('/test-1.jpg');
        htmlPluginData.plugin.assetJson = JSON.stringify(assetJson);
        callback(null, htmlPluginData);
    });
  });
};
module.exports = HtmlInspect;

Do you know of a way I could pass the rendered template HTML though a loader during one of these events to allow webpack to discover the additional resources?

[jantimon]

Use a JavaScript file as root template - require the real template and use the require context to load the additional assets - pass the result to your template and return the string

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.