在运行时动态重写CSS块URL

问题描述

我目前正在扩展现有的vueJS项目，我们希望将Webpack块作为“附加组件”加载，而不是将其捆绑到主项目中。 我们从RestAPI获得附加信息，该信息返回到如下所示Webpack块的相对链接：

[
"/addons/calendar/calendar-component.7024d837.js","/addons/calendar/vendors~calendar-component.bc898c3c.js","/addons/calendar/calendar-component.b68dd9ce.css","/addons/calendar/vendors~calendar-component.13f98a9b.css"
]

现在的问题是，默认情况下，webpack会从url中调用资产：

/static/js/chunk-d92a011e.1414c555.js

因此，我必须在JS脚本的运行时重写链接。对于js块，我发现this模块效果很好，但它不会加载CSS块（我已经打开了票证，但我需要快速找到解决方案...）

我试图在加载js块时手动加载css块，但是由于某些原因，VueRouter一直挂起，因为（我想）我需要在<link>标签之外的onload函数中添加其他代码，例如webpack，这样做。

 var linkTag = document.createElement('link')
    linkTag.rel = 'stylesheet'
    linkTag.type = 'text/css'
    linkTag.onload = () => { console.log('preload css for module: ' + chunkName) }
    linkTag.href = cssFile
    //webpack would add code to linkTag.onload
    var s = document.getElementsByTagName('head')[0]
    s.appendChild(linkTag)

有人知道该怎么做吗？我可以找到不合适的编译时解决方案。

TLDR：我需要类似以下的伪代码：

cssUrlRewriter.rewriteOnCssLoad((oldUrl) => {
  return oldUrl + '?foo=bar'
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）