Webpack如何使用magic comments配置UMD库的动态导入路径

问题根源 #

你遇到的路径错位问题本质是webpack默认的动态导入基准路径规则：当output.publicPath留空时，webpack会以当前页面的URL作为chunk加载的基准路径，不会自动识别UMD库自身的部署路径。

可行解决方案 #

方案1：运行时动态设置webpack publicPath（最优方案） #

webpack支持在运行时通过内置变量__webpack_public_path__动态修改chunk加载的基准路径，无需改动构建配置，只需要在库的入口文件最顶部（所有动态导入逻辑执行前）添加以下代码：

// 入口文件首行执行
if (typeof window !== 'undefined') {
  let libBasePath = ''
  // 场景1：库通过script标签直接引入
  if (document.currentScript) {
    const libFullSrc = document.currentScript.src
    libBasePath = libFullSrc.substring(0, libFullSrc.lastIndexOf('/') + 1)
  } 
  // 场景2：库被项目编译打包引入，可开放配置项让使用方传入库的部署路径
  else if (window.widgetContainerPublicPath) {
    libBasePath = window.widgetContainerPublicPath
  }
  // 赋值给webpack内置动态publicPath变量
  __webpack_public_path__ = libBasePath
}

原有动态导入语句无需修改，webpack加载widget chunk时会自动使用你设置的库路径作为基准。

方案2：手动拼接绝对路径 + webpackIgnore #

如果你不想修改全局publicPath，也可以手动拼接widget的完整绝对路径，通过magic comment让webpack跳过路径处理：

// 先按上述逻辑拿到libBasePath后再执行导入
import(/* webpackIgnore: true */ `${libBasePath}widgets/${b.slug}/js/widget.js`)

该方案不需要改动webpack构建配置，也能确保路径正确。

方案3：你提到的备选方案 #

将每个widget单独发布为独立包、导入时加webpackIgnore标记的方案确实可以正常运行，缺点是会增加多包的维护和发布成本，适合widget需要独立迭代的场景。

内容的提问来源于stack exchange，提问作者kbrec85