Absolute path in inject when relative path is expected

[incompletude]

Hello again boys, thank you all for the assistance so far. I have another small problem and I hope you guys can point me to a direction.

        new WebappWebpackPlugin({
            logo: "./src/assets/example.png",
            prefix: "icons-[hash]/",
            cache: false,
            inject: "force",
        })

Why is the plugin adding a reference to the root folder in /icons-214bffbdb7514553954e6113cebd4aa1/favicon-16x16.png when the prefix uses a relative path?

Thx.

<link rel="icon" type="image/png" sizes="16x16" href="/icons-214bffbdb7514553954e6113cebd4aa1/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons-214bffbdb7514553954e6113cebd4aa1/favicon-32x32.png">
<link rel="shortcut icon" href="/icons-214bffbdb7514553954e6113cebd4aa1/favicon.ico">

[viiiprock]

I have the same issue :(

[brunocodutra]

By definition, URLs to assets are composed as '${publicPath}/${prefix}/${assetName}, where publicPath is configured by Webpack: https://webpack.js.org/guides/public-path/

If it's not set, it defaults to /, so if you need it to be relative, then just set it as appropriate.

[viiiprock]

@brunocodutra I tried to add publicPath: path.join(__dirname, "dist") and still locate to root, my js and css works fine.

[brunocodutra]

This is probably due to #105, could you retry with caching disabled?

[incompletude]

@brunocodutra The default behaviour for many webpack plugins is to keep the path unchanged (according to the prefix) if no publicPath is offered. Why add a reference to the root folder if no path is offered?

[brunocodutra]

It defaults to '/' because otherwise it would produce broken output by default, since browserconfig.xml does not support relative paths, see https://stackoverflow.com/questions/27116378/mstile-image-location-specification

[octatone]

I am running into this issue as well. We use <base href="somecdn.net/somebuild/" /> in our index.html to control delivery of assets. HTMLWebpackPlugin does not add a leading slash to its injected resources, only webapp-webpack-plugin is adding this leading slash to its injected resources in index.html.

This is inconsistent with HTMLWebpackPlugin's behavior and makes it impossible for us to use webapp-webpack-plugin for favicon injection into index.html.

[octatone]

It seems like the path should only get fixed up when rendering browserconfig.xml, rather than breaking expected behavior for injected assets in HTMLWebpackPlugin in index.html

[brunocodutra]

Are you able to set publicPath: ''? Does that fix the issue for you?

[sheerun]

@brunocodutra I can't set publicPath because it's controlled by Next.js framework I'm using. Is it possible to override this option only for webapp-webpack-plugin?

[brunocodutra]

@sheerun could you give more details, e.g. what output do you get and what you expect instead?

[korylprince]

This is still not ideal behavior.

My use case is building static files to be hosted under subfolders, e.g. http://example.com/app1, http://example.com/app2, etc. This makes relative paths incredibly useful, because it decouples the app from the deployment.

I can't find any way to do that with webapp-webpack-plugin without manually setting the subfolder in the build configuration meaning I must know the subfolder ahead of time.

The closest I can get is doing something like this:

    new WebappWebpackPlugin({
        logo: "/path/to/icon.png"
        outputPath: "icons/",
        publicPath: "icons/",
        prefix: "",
    }),

This will cause all the icons to be resolved relatively like normal, but the manifest files don't take into account the relative path, so the browser will request something like icons/icons/file... instead of icons/file....

If the manifest files could be made to reference the files relatively, or even give another option similar to publicPath but just for manifests, it would fix this issue.

[brunocodutra]

@korylprince doesn't the following do what you expect, i.e. resolve icons relative to the manifest file?

    new WebappWebpackPlugin({
        logo: "/path/to/icon.png"
        outputPath: "icons/",
        publicPath: ".",
        prefix: "",
    }),

Note however that relative paths in manifest files may not always work https://stackoverflow.com/questions/27116378/mstile-image-location-specification

[korylprince]

That fixes the manifest problem, but now all the files are referenced in index.html without the icon/ so it's just shifting the problem.

I understand the problem with browserconfig.xml, but I'm in agreement with others that have posted here that the default behavior should be the more useful and any corner cases should be handled for the weird cases like browserconfig.xml with additional config or something.

Because I didn't say it before, thanks for the project!