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

【问题标题】：Why webpack use jsonp to get chunk script为什么 webpack 使用 jsonp 来获取 chunk 脚本
【发布时间】：2017-04-07 03:43:03
【问题描述】：

我认为不存在 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__);
/******/    };

【问题讨论】：

标签： webpack jsonp

【解决方案1】：

我的想法是，

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

因此，webpack 团队可能会先获取脚本文件（JSON）然后附加文档，而不是先附加脚本标签（JSONP），然后让脚本标签加载文件。

关于 JSON 和 JSONP 的精彩解释 here

【讨论】：

哇哇哇哇哇

【解决方案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/技术（当然是 IMO）。

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

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

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

就是这样。 :)

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

【讨论】：