使用 webpack 的 import(‘./a’).then(A=>{})动态引入模块后遇到的问题

a.html 内嵌 b.html，代码如下

1
2

<!-- a.html -->
<iframe id="iframe" src="b.html"></iframe>

在 b.html 中，引入了 b.js，因为某种原因，a.html 也要引入 b.js，代码如下

1
2

// a.js
import B from "./b.js";

结果 b.js 报错了，因为 b.js 使用了 window.staticConfig ，而这些 window.staticConfig 只在 b.html 上有。所以当执行时，b.js 就会报错

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

window.addEventListener("message", function(res) {
  if (res && res.data) {
    const { type, data } = isString(res.data) ? JSON.parse(res.data) : res.data;

    if (type === "window_data") {
      window.staticConfig = data.staticConfig;
      // 需在接收到iframe数据后动态引入
      import("./b").then(B => {
          B.init();
        });
      });
    }
  }
});

按照上面的写法，webpack 打包之后，最后生成的代码包为app.html,app.js,app.css,2.4ea04156fe.js(b.js打包生成，被动态加载)。将这些文件全部上传到服务器https://a.eago.com/下，结果出现新的问题，因为我们使用https://a.eago.com/m/${id}访问页面,而 webpack 动态引入的 publicPath 默认是"",也就是说动态资源访问路径变成了https://a.eago.com/m/2.4ea04156fe.js,出现 404 错误。

看一下 webpack 生成的代码：

1
2
3

function jsonpScriptSrc(chunkId) {
  return __webpack_require__.p + "" + ({}[chunkId] || chunkId) + ".js";
}

解决办法：配置 publicPath，将文件上传到 cdn 访问，这样就只需要上传一份 app.html 到服务器，问题也得到解决