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

Question

比如，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是否有相关的功能配置或者插件？

Answer 1

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

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

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