Webpack中有没有将html中的在线静态资源下载到本地,然后将引用修改成本地的相对路径的loader或plugin?

Tomcat_Say
  • 1
新手上路,请多包涵

比如,HTML中的代码如下,有3个外部静态资源链接:

<link href="https://cdn.abc.com/a.css"></link>
<script src="https://cdn.abc.com/a.js"></script>
<div>
    <img src="https://img.abc.com/a.png">
</div>

经过webpack处理先将 link,script,img中链接静态资源下载到本地/static对应目录,然后替换掉html中链接变成下面这样

<link href="/static/css/a.css"></link>
<script src="/static/js/a.js"></script>
<div>
    <img src="/static/png/a.png">
</div>

之所以这样做是要做成离线包,请问下webpage是否有相关的功能配置或者插件?

回复
阅读 290
1 个回答

提供一些思路,做是肯定可以做到的。

首先还是要看具体情形,我的理解是,你这个是一次性转换,将现有项目中依赖的远程资源,下载到本地。如果少的话,例如这个你需要本地化的资源只是在一两个模版html文件中,那直接手动处理就很简单,手动下载,手动原代码修改。如果需要本地化的资源分布在非常多html文件中。那就写个小脚本呗,扫描所有的.html文件,然后下载、修改源代码,所以如果是一次性的转换,你其实不需要用到任何关于webpack的插件或是loader,你可以通过 html-parse 拿到你需要下载的src资源,然后下载,转换ast,然后生成新的代码。(我之前确实也处理过类似的...把项目中依赖远程的图片,全部本地化 https://www.npmjs.com/package...

如果你想利用现有的webpack生态,可以参考或者利用下现有的类似html-loaderpreprocessor 在这个函数中处理解析到的远程文件,然后下载,然后再把新的相对路径修改,返回新的html代码

你知道吗?

宣传栏