Webpack为什么使用jsonp获取代码块脚本？

Question

我认为没有CORS问题。

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

这是生成的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__);
/******/    };

- mjkim

Answer 1

我的想法是，

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

因此，webpack团队可能认为，与其先获取脚本文件（JSON），然后将其附加到文档中，不如先附加脚本标记（JSONP），然后让脚本标记加载该文件。

关于JSON和JSONP，这里有一个很好的解释。

- Thaadikkaaran

---

什么？ - Glenn Mohammad

Answer 2

我不确定我理解原始回答的内容。以下是我的理解：

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技巧（当然是我个人的看法）。

好的...这怎么适用于Webpack块脚本呢？

显然，块脚本不一定是JSON。它们大部分时间可能是脚本文件。但是，我认为在一个函数中包装某些东西（可以是JSON、脚本、字符串等）的同样的JSONP原则仍然适用。

Webpack可能会在一个函数中包装块脚本。因此，他们使用“JSONP”这个术语。

就是这样。:)

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

- Tom