使用webpack打包，如何实现在打包后所有静态资源路径都使用相对路径（并非/开头的全路径）？

Question

我的项目是采用vue-cli脚手架搭建的开发环境，是一个多页（多入口）程序，目前是根据src中各入口js的路径来动态生成页面路径，因此发布后的多个页面的层级并不一致，比如登录页在根目录下，部分页面在第二层级，还有些页面在第三、四层级等（动态生成）。

在webpack的output的publicPath配置的是'/'，打包后的文件和资源引用路径如下：

login.html       // 对a.js的引用打包后的效果：<script src="/static/js/a.js"><script/>
ccm/a.html       // 对a.js的引用打包后的效果：<script src="/static/js/a.js"><script/>
ccm/basic/b.html // 对a.js的引用打包后的效果：<script src="/static/js/a.js"><script/>
static/js/a.js
static/css/a.css        // 对a.png的引用打包后的效果：url(/static/images/a.png)
static/css/basic/b.css  // 对a.png的引用打包后的效果：url(/static/images/a.png)
static/images/a.png

打包后的所有页面的js、css引用和css中的图片引用，都是采用/开头的全路径（/是站点根目录路径）。

这样的引用路径，用于网站部署没什么问题，但是这个项目同时用于App集成，要和App打包在一起，因此所有静态资源的引用路径必须是相对路径（App里没有站点概念，/不会被识别为根目录）。它需要这样的打包效果：

login.html       // 对a.js的引用打包后的效果：<script src="./static/js/a.js"><script/>）
ccm/a.html       // 对a.js的引用打包后的效果：<script src="../static/js/a.js"><script/>
ccm/basic/b.html // 对a.js的引用打包后的效果：<script src="../../static/js/a.js"><script/>
static/js/a.js
static/css/a.css        // 对a.png的引用打包后的效果：url(../images/a.png)
static/css/basic/b.css  // 对a.png的引用打包后的效果：url(../../images/a.png)
static/images/a.png

也在网上搜索过，发现有相似的帖子：点击这里查看，它提供的思路是：修改publicPath来解决。
但没有解决我的问题，我项目里的多个页面路径层级不一，对静态资源的引用路径前缀肯定也是不一致的。

请问，该如何配置webpack，可以实现我的要求？

Answer 1

暂时自己写了个loader来解决：
1、html和main.js里直接使用静态资源（js、css、url(...)、src）的，可以完美解决；
2、动态路径的css的暂时解决办法是：将css和img/font都生成到固定路径下，从而相对路径也固定了；
3、动态路径的js的暂时解决办法是：在js里自定义一个window的变量作为相对路径前缀，弊端是这个js无法公用，因为路径是相对于html的（设置__webpack_public_path__也是这样的原理，但为了同时支持全路径和相对路径，所以用了window变量）。

期待有更好的方案（支持多入口时html、js和css的发布路径都是动态的情况）。