使用__webpack_public_path__根据js路径动态拼接图片路径背景最近在开发组件构建功能，将vue组件

背景

最近在开发组件构建功能，将vue组件构建为独立的js文件，用于被其他页面引用加载。

但是存在一个问题，html引用的图片路径正常来说要么是相对路径，要么是完整的绝对路径。

但是相对路径相对的是加载js的html页面，与js引用的图片资源路径毫无关系。又不能在构建之前决定加载js的publicPath前缀路径。

那么怎样实现js文件在任何地方加载，同时js相对路径的图片也被正常加载，是一个问题。

组件目录结构

├─dist 
│ ├─Card-demo // 组件
│ │ ├─0.0.1 // 组件版本
│ │ │ ├─index.js // 组件js
│ │ │ ├─static
│ │ │ │ ├─icon.xxx.png

观察vue-cli

在之前的开发过程中，发现使用vue-cli的构建lib库的时候，发现无论在哪个页面加载js库，图片都能正常加载。而且html加载的图片居然都是完整路径，并且工程没有处理过publicPath公共资源路径。

非常好奇，查看一下vue-cli构建代码是怎么构建的。

vue-cli构建lib库使用的是vue-cli-service build --target lib xxx命令。

构建代码在@vue\cli-service\lib\commands\build\resolveLibConfig.js位置，发现一段关键注释：

rawConfig.output = Object.assign({
  library: libName,
  libraryExport: isVueEntry ? 'default' : undefined,
  libraryTarget: format,
  // preserve UDM header from webpack 3 until webpack provides either
  // libraryTarget: 'esm' or target: 'universal'
  // https://github.com/webpack/webpack/issues/6522
  // https://github.com/webpack/webpack/issues/6525
  globalObject: `(typeof self !== 'undefined' ? self : this)`
}, rawConfig.output, {
  filename: `${entryName}.js`,
  chunkFilename: `${entryName}.[name].js`,
  // use dynamic publicPath so this can be deployed anywhere
  // the actual path will be determined at runtime by checking
  // document.currentScript.src.
  publicPath: ''
})