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__);

/******/    };

Answer 1

我的想法是，

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

所以webpack团队可能会这样做，而不是先获取脚本文件（JSON），然后附加文档，先附加脚本标记（JSONP）然后让脚本标记加载文件。

关于JSON和JSONP的好解释here

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 hack / technique（当然是IMO）。

好吧...这对Webpack块脚本有何作用？

好吧，显然块脚本不一定是JSON。大多数情况下，它们可能是脚本文件。但是，我认为将某些东西（可以是JSON，脚本，字符串等）包装在函数中的相同JSONP原则仍然适用。

Webpack可能将块脚本包装在一个函数中。因此，他们使用“ JSONP”字眼。

就是这样。：）

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

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

2 个答案: