为什么 webpack 使用 jsonp 获取 chunk 脚本

Question

我不认为存在 CORS 问题。

为什么webpack使用jsonp获取chunk脚本？

这是生成的webpackBootstrap.

/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);
/******/    };

Answer 1

我的想法是，

无论webpack使用JSON还是JSONP，它都必须将加载的chunk文件追加到文档中。

所以 webpack 团队可能有，而不是先获取脚本文件 (JSON) 然后附加文档，先附加脚本标签 (JSONP) 然后让脚本标记加载文件。

很好的解释 here 关于 JSON 和 JSONP

Answer 2

不确定我 follow/understand 原来的答案。这是我的破解方法，

A JSONP 是一个 javascript 文件 ，它只包含一个包装 JSON 数据的函数。该函数的名称通常可以动态命名为请求者希望调用它的任何名称，

// client code
function myCallback(data) { console.log(data); }

var jsonp = document.createElement("script");
jsonp.src = '/jsonp_server_route?callback=myCallback';
document.head.appendChild(jsonp);

// '/jsonp_server_route?callback=myCallback' served content
myCallback( { "foo": 1 } );

如果您定义了一个名为 myCallback 的函数，myCallback 将被调用，然后繁荣！你得到了你的数据......就像变魔术一样。但是，它实际上只是一个聪明的 javascript hack/technique（当然是 IMO）。

好的...这如何应用于 Webpack 块脚本？

嗯，显然块脚本不一定是 JSON。大多数时候它们可能是脚本文件。但是，我认为在函数中包装 something（可以是 JSON、脚本、字符串等）的相同 JSONP 原则仍然适用。

Webpack 可能将块脚本包装在一个函数中。因此，他们使用措辞 'JSONP'.

就是这样。 :)

PS
由于 Webpack 控制所有输出文件中的命名，因此 JSONP 回调函数的名称在构建时已经跨文件已知。因此，不需要动态设置 JSONP 回调函数名称（在运行时）。

为什么 webpack 使用 jsonp 获取 chunk 脚本

Why webpack use jsonp to get chunk script

jsonp

webpack