JsonpMainTemplatePlugin.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. Author Tobias Koppers @sokra
  4. */
  5. "use strict";
  6. const Template = require("./Template");
  7. class JsonpMainTemplatePlugin {
  8. apply(mainTemplate) {
  9. mainTemplate.plugin("local-vars", function(source, chunk) {
  10. if(chunk.chunks.length > 0) {
  11. return this.asString([
  12. source,
  13. "",
  14. "// objects to store loaded and loading chunks",
  15. "var installedChunks = {",
  16. this.indent(
  17. chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(",\n")
  18. ),
  19. "};"
  20. ]);
  21. }
  22. return source;
  23. });
  24. mainTemplate.plugin("jsonp-script", function(_, chunk, hash) {
  25. const chunkFilename = this.outputOptions.chunkFilename;
  26. const chunkMaps = chunk.getChunkMaps();
  27. const crossOriginLoading = this.outputOptions.crossOriginLoading;
  28. const chunkLoadTimeout = this.outputOptions.chunkLoadTimeout;
  29. const jsonpScriptType = this.outputOptions.jsonpScriptType;
  30. const scriptSrcPath = this.applyPluginsWaterfall("asset-path", JSON.stringify(chunkFilename), {
  31. hash: `" + ${this.renderCurrentHashCode(hash)} + "`,
  32. hashWithLength: length => `" + ${this.renderCurrentHashCode(hash, length)} + "`,
  33. chunk: {
  34. id: "\" + chunkId + \"",
  35. hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
  36. hashWithLength(length) {
  37. const shortChunkHashMap = Object.create(null);
  38. Object.keys(chunkMaps.hash).forEach(chunkId => {
  39. if(typeof chunkMaps.hash[chunkId] === "string")
  40. shortChunkHashMap[chunkId] = chunkMaps.hash[chunkId].substr(0, length);
  41. });
  42. return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
  43. },
  44. name: `" + (${JSON.stringify(chunkMaps.name)}[chunkId]||chunkId) + "`
  45. }
  46. });
  47. return this.asString([
  48. "var script = document.createElement('script');",
  49. `script.type = ${JSON.stringify(jsonpScriptType)};`,
  50. "script.charset = 'utf-8';",
  51. "script.async = true;",
  52. `script.timeout = ${chunkLoadTimeout};`,
  53. crossOriginLoading ? `script.crossOrigin = ${JSON.stringify(crossOriginLoading)};` : "",
  54. `if (${this.requireFn}.nc) {`,
  55. this.indent(`script.setAttribute("nonce", ${this.requireFn}.nc);`),
  56. "}",
  57. `script.src = ${this.requireFn}.p + ${scriptSrcPath};`,
  58. `var timeout = setTimeout(onScriptComplete, ${chunkLoadTimeout});`,
  59. "script.onerror = script.onload = onScriptComplete;",
  60. "function onScriptComplete() {",
  61. this.indent([
  62. "// avoid mem leaks in IE.",
  63. "script.onerror = script.onload = null;",
  64. "clearTimeout(timeout);",
  65. "var chunk = installedChunks[chunkId];",
  66. "if(chunk !== 0) {",
  67. this.indent([
  68. "if(chunk) {",
  69. this.indent("chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));"),
  70. "}",
  71. "installedChunks[chunkId] = undefined;"
  72. ]),
  73. "}"
  74. ]),
  75. "};",
  76. ]);
  77. });
  78. mainTemplate.plugin("require-ensure", function(_, chunk, hash) {
  79. return this.asString([
  80. "var installedChunkData = installedChunks[chunkId];",
  81. "if(installedChunkData === 0) {",
  82. this.indent([
  83. "return new Promise(function(resolve) { resolve(); });"
  84. ]),
  85. "}",
  86. "",
  87. "// a Promise means \"currently loading\".",
  88. "if(installedChunkData) {",
  89. this.indent([
  90. "return installedChunkData[2];"
  91. ]),
  92. "}",
  93. "",
  94. "// setup Promise in chunk cache",
  95. "var promise = new Promise(function(resolve, reject) {",
  96. this.indent([
  97. "installedChunkData = installedChunks[chunkId] = [resolve, reject];"
  98. ]),
  99. "});",
  100. "installedChunkData[2] = promise;",
  101. "",
  102. "// start chunk loading",
  103. "var head = document.getElementsByTagName('head')[0];",
  104. this.applyPluginsWaterfall("jsonp-script", "", chunk, hash),
  105. "head.appendChild(script);",
  106. "",
  107. "return promise;"
  108. ]);
  109. });
  110. mainTemplate.plugin("require-extensions", function(source, chunk) {
  111. if(chunk.chunks.length === 0) return source;
  112. return this.asString([
  113. source,
  114. "",
  115. "// on error function for async loading",
  116. `${this.requireFn}.oe = function(err) { console.error(err); throw err; };`
  117. ]);
  118. });
  119. mainTemplate.plugin("bootstrap", function(source, chunk, hash) {
  120. if(chunk.chunks.length > 0) {
  121. var jsonpFunction = this.outputOptions.jsonpFunction;
  122. return this.asString([
  123. source,
  124. "",
  125. "// install a JSONP callback for chunk loading",
  126. `var parentJsonpFunction = window[${JSON.stringify(jsonpFunction)}];`,
  127. `window[${JSON.stringify(jsonpFunction)}] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {`,
  128. this.indent([
  129. "// add \"moreModules\" to the modules object,",
  130. "// then flag all \"chunkIds\" as loaded and fire callback",
  131. "var moduleId, chunkId, i = 0, resolves = [], result;",
  132. "for(;i < chunkIds.length; i++) {",
  133. this.indent([
  134. "chunkId = chunkIds[i];",
  135. "if(installedChunks[chunkId]) {",
  136. this.indent("resolves.push(installedChunks[chunkId][0]);"),
  137. "}",
  138. "installedChunks[chunkId] = 0;"
  139. ]),
  140. "}",
  141. "for(moduleId in moreModules) {",
  142. this.indent([
  143. "if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {",
  144. this.indent(this.renderAddModule(hash, chunk, "moduleId", "moreModules[moduleId]")),
  145. "}"
  146. ]),
  147. "}",
  148. "if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);",
  149. "while(resolves.length) {",
  150. this.indent("resolves.shift()();"),
  151. "}",
  152. this.entryPointInChildren(chunk) ? [
  153. "if(executeModules) {",
  154. this.indent([
  155. "for(i=0; i < executeModules.length; i++) {",
  156. this.indent(`result = ${this.requireFn}(${this.requireFn}.s = executeModules[i]);`),
  157. "}"
  158. ]),
  159. "}",
  160. "return result;",
  161. ] : ""
  162. ]),
  163. "};"
  164. ]);
  165. }
  166. return source;
  167. });
  168. mainTemplate.plugin("hot-bootstrap", function(source, chunk, hash) {
  169. const hotUpdateChunkFilename = this.outputOptions.hotUpdateChunkFilename;
  170. const hotUpdateMainFilename = this.outputOptions.hotUpdateMainFilename;
  171. const crossOriginLoading = this.outputOptions.crossOriginLoading;
  172. const hotUpdateFunction = this.outputOptions.hotUpdateFunction;
  173. const currentHotUpdateChunkFilename = this.applyPluginsWaterfall("asset-path", JSON.stringify(hotUpdateChunkFilename), {
  174. hash: `" + ${this.renderCurrentHashCode(hash)} + "`,
  175. hashWithLength: length => `" + ${this.renderCurrentHashCode(hash, length)} + "`,
  176. chunk: {
  177. id: "\" + chunkId + \""
  178. }
  179. });
  180. const currentHotUpdateMainFilename = this.applyPluginsWaterfall("asset-path", JSON.stringify(hotUpdateMainFilename), {
  181. hash: `" + ${this.renderCurrentHashCode(hash)} + "`,
  182. hashWithLength: length => `" + ${this.renderCurrentHashCode(hash, length)} + "`
  183. });
  184. const runtimeSource = Template.getFunctionContent(require("./JsonpMainTemplate.runtime.js"))
  185. .replace(/\/\/\$semicolon/g, ";")
  186. .replace(/\$require\$/g, this.requireFn)
  187. .replace(/\$crossOriginLoading\$/g, crossOriginLoading ? `script.crossOrigin = ${JSON.stringify(crossOriginLoading)}` : "")
  188. .replace(/\$hotMainFilename\$/g, currentHotUpdateMainFilename)
  189. .replace(/\$hotChunkFilename\$/g, currentHotUpdateChunkFilename)
  190. .replace(/\$hash\$/g, JSON.stringify(hash));
  191. return `${source}
  192. function hotDisposeChunk(chunkId) {
  193. delete installedChunks[chunkId];
  194. }
  195. var parentHotUpdateCallback = window[${JSON.stringify(hotUpdateFunction)}];
  196. window[${JSON.stringify(hotUpdateFunction)}] = ${runtimeSource}`;
  197. });
  198. mainTemplate.plugin("hash", function(hash) {
  199. hash.update("jsonp");
  200. hash.update("4");
  201. hash.update(`${this.outputOptions.filename}`);
  202. hash.update(`${this.outputOptions.chunkFilename}`);
  203. hash.update(`${this.outputOptions.jsonpFunction}`);
  204. hash.update(`${this.outputOptions.hotUpdateFunction}`);
  205. });
  206. }
  207. }
  208. module.exports = JsonpMainTemplatePlugin;