Modifying URL for various assets, not just chunks

[daihere1993]

I want allot different CND for different chunk by their chunk name.

But I can't found any arguments in methodName( ) .

[agoldis]

methodName doesn't have any arguments. You can use replaceSrcMethodName for that.

[5punk]

@agoldis Thanks for an amazing job on the plugin. But, I feel this issue should be reopened.

replaceSrcMethodName adds a wrapper around the method: __webpack_require__.e = the chunk ensure function. This solves for webpack chunks.

For all bundle assets: Typically, __webpack_require__.p = the bundle public path. This will solve for css, images and javascript, set a contextual basehref. methodName already sets this.

This can only be done if you supply an argument to the methodName function, so developers can add a search and replace url functionality.

[agoldis]

@5punk I see your point, make sense! Please reopen and describe your use-case in details - what is desired result and why existing tools cannot achieve the desired result. that would be very helpful for getting the issues resolved!

[5punk]

Absolutely. Would you like me to submit a pull request too?

[agoldis]

@5punk If you have a solution - that would be awesome!!!

[agoldis]

@5punk hey, I was looking again into the issue and invested some time into trying to find a way to resolve it. I believe you want to obtain the path of imported resource as an argument to methodName().

So methodName() is invoked whenever __webpack_public_path__ is used at runtime. The problem is that __webpack_public_path__ might be accessed by any plugin, for example, file-loader uses the following when it detects url('assets/bird.jpg') CSS syntax:

  var publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;

So, I there's no way to know would be the full required path.

Another approach would tweak the network layer (in a manner similar to replaceSrcMethodName), but it also seems not feasible because not all network requests are issued by using webpack (e.g. css url(....))

I can advise to use specific module / loader capabilities for manipulating the URL of a resource. E.g. https://github.com/webpack-contrib/file-loader#publicpath can be function that accepts resource name. Keep in ming, though, that the methods you provide is only invoked at build time.

If you have any suggestion / idea please share :)

[5punk]

I spent some time looking and digging through webpack itself. I can't find any hook or tapable event we can plug into that's a universal overridable fn callback.

The whole purpose is to have some baseref dynamically set. Where chunks from different cdn sources can be supported simultaneously. If any plugin is close to solving the problem, it's this one.

I'm going to spend some time on gitter with the nice folk of webpack, see what we can brainstorm!

[orballo]

Hi there,

Has there been progress on this issue? I'm trying this plugin, and I see that the chunks are using the correct publicPath, but images do not.

Is there a way to make this work?

Thanks!

EDIT: We are using Webpack 4. Would this issue be fixed if we update to Webpack 5?

[agoldis]

@orballo no progress unfortunately :(