Webpack 5升级后IE 11中Chunk加载失败——动态添加脚本引发路径异常问题

你遇到的这个问题，本质是IE11和现代浏览器在脚本加载后基准URL的处理逻辑差异，加上Webpack 5的chunk加载机制共同导致的。咱们一步步拆解解决：

问题根源 #

当你用相对路径./assets/js/vendor/library/lib.js动态插入脚本时，IE11会把这个脚本所在的目录/assets/js/vendor/library/当成页面新的基准URL。而Webpack 5在IE11环境下，会基于这个被篡改的基准URL来拼接chunk的加载路径，所以原本该从/chunk.js加载的文件，被错误解析成了/assets/js/vendor/library/chunk.js。反观Chrome等现代浏览器，会始终以页面原本的根路径作为基准，因此不会出问题。

解决方案（按优先级排序） #

• 改用绝对路径加载动态脚本
  这是最简单直接的修复方式，把相对路径改成根路径开头的绝对路径，避免干扰页面基准URL：

  var url = '/assets/js/vendor/library/lib.js' // 去掉开头的./，直接用根路径起始的绝对路径
  var script = document.createElement('script')
  script.src = url
  script.async = true
  document.getElementsByTagName('head')[0].appendChild(script)
  

• 显式配置Webpack的output.publicPath
  从构建层面强制所有chunk从根路径加载，彻底杜绝路径解析异常的可能。在Webpack配置文件中添加：

  module.exports = {
    // ...其他配置项
    output: {
      // ...其他output配置
      publicPath: '/' // 明确指定chunk加载的基准路径为根目录
    }
  }
  

• 给动态脚本指定基准路径（备选）
  如果必须保留相对路径，可以给脚本元素显式设置基准URL：

  var url = './assets/js/vendor/library/lib.js'
  var script = document.createElement('script')
  script.src = url
  script.async = true
  script.baseURI = '/' // 强制脚本以根路径为基准解析
  document.getElementsByTagName('head')[0].appendChild(script)
  

  不过这个方法的兼容性不如前两种，优先推荐前两个方案。

验证 #

修改完成后在IE11中测试，应该能看到chunk正确从/chunk.js加载，同时动态脚本也能正常运行。

内容的提问来源于stack exchange，提问作者Rafał S.