HotModuleReplacementPlugin.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. Author Tobias Koppers @sokra
  4. */
  5. "use strict";
  6. const { SyncBailHook } = require("tapable");
  7. const { RawSource } = require("webpack-sources");
  8. const Template = require("./Template");
  9. const ModuleHotAcceptDependency = require("./dependencies/ModuleHotAcceptDependency");
  10. const ModuleHotDeclineDependency = require("./dependencies/ModuleHotDeclineDependency");
  11. const ConstDependency = require("./dependencies/ConstDependency");
  12. const NullFactory = require("./NullFactory");
  13. const ParserHelpers = require("./ParserHelpers");
  14. module.exports = class HotModuleReplacementPlugin {
  15. constructor(options) {
  16. this.options = options || {};
  17. this.multiStep = this.options.multiStep;
  18. this.fullBuildTimeout = this.options.fullBuildTimeout || 200;
  19. this.requestTimeout = this.options.requestTimeout || 10000;
  20. }
  21. apply(compiler) {
  22. const multiStep = this.multiStep;
  23. const fullBuildTimeout = this.fullBuildTimeout;
  24. const requestTimeout = this.requestTimeout;
  25. const hotUpdateChunkFilename =
  26. compiler.options.output.hotUpdateChunkFilename;
  27. const hotUpdateMainFilename = compiler.options.output.hotUpdateMainFilename;
  28. compiler.hooks.additionalPass.tapAsync(
  29. "HotModuleReplacementPlugin",
  30. callback => {
  31. if (multiStep) return setTimeout(callback, fullBuildTimeout);
  32. return callback();
  33. }
  34. );
  35. const addParserPlugins = (parser, parserOptions) => {
  36. parser.hooks.expression
  37. .for("__webpack_hash__")
  38. .tap(
  39. "HotModuleReplacementPlugin",
  40. ParserHelpers.toConstantDependencyWithWebpackRequire(
  41. parser,
  42. "__webpack_require__.h()"
  43. )
  44. );
  45. parser.hooks.evaluateTypeof
  46. .for("__webpack_hash__")
  47. .tap(
  48. "HotModuleReplacementPlugin",
  49. ParserHelpers.evaluateToString("string")
  50. );
  51. parser.hooks.evaluateIdentifier.for("module.hot").tap(
  52. {
  53. name: "HotModuleReplacementPlugin",
  54. before: "NodeStuffPlugin"
  55. },
  56. expr => {
  57. return ParserHelpers.evaluateToIdentifier(
  58. "module.hot",
  59. !!parser.state.compilation.hotUpdateChunkTemplate
  60. )(expr);
  61. }
  62. );
  63. // TODO webpack 5: refactor this, no custom hooks
  64. if (!parser.hooks.hotAcceptCallback) {
  65. parser.hooks.hotAcceptCallback = new SyncBailHook([
  66. "expression",
  67. "requests"
  68. ]);
  69. }
  70. if (!parser.hooks.hotAcceptWithoutCallback) {
  71. parser.hooks.hotAcceptWithoutCallback = new SyncBailHook([
  72. "expression",
  73. "requests"
  74. ]);
  75. }
  76. parser.hooks.call
  77. .for("module.hot.accept")
  78. .tap("HotModuleReplacementPlugin", expr => {
  79. if (!parser.state.compilation.hotUpdateChunkTemplate) {
  80. return false;
  81. }
  82. if (expr.arguments.length >= 1) {
  83. const arg = parser.evaluateExpression(expr.arguments[0]);
  84. let params = [];
  85. let requests = [];
  86. if (arg.isString()) {
  87. params = [arg];
  88. } else if (arg.isArray()) {
  89. params = arg.items.filter(param => param.isString());
  90. }
  91. if (params.length > 0) {
  92. params.forEach((param, idx) => {
  93. const request = param.string;
  94. const dep = new ModuleHotAcceptDependency(request, param.range);
  95. dep.optional = true;
  96. dep.loc = Object.create(expr.loc);
  97. dep.loc.index = idx;
  98. parser.state.module.addDependency(dep);
  99. requests.push(request);
  100. });
  101. if (expr.arguments.length > 1) {
  102. parser.hooks.hotAcceptCallback.call(
  103. expr.arguments[1],
  104. requests
  105. );
  106. parser.walkExpression(expr.arguments[1]); // other args are ignored
  107. return true;
  108. } else {
  109. parser.hooks.hotAcceptWithoutCallback.call(expr, requests);
  110. return true;
  111. }
  112. }
  113. }
  114. });
  115. parser.hooks.call
  116. .for("module.hot.decline")
  117. .tap("HotModuleReplacementPlugin", expr => {
  118. if (!parser.state.compilation.hotUpdateChunkTemplate) {
  119. return false;
  120. }
  121. if (expr.arguments.length === 1) {
  122. const arg = parser.evaluateExpression(expr.arguments[0]);
  123. let params = [];
  124. if (arg.isString()) {
  125. params = [arg];
  126. } else if (arg.isArray()) {
  127. params = arg.items.filter(param => param.isString());
  128. }
  129. params.forEach((param, idx) => {
  130. const dep = new ModuleHotDeclineDependency(
  131. param.string,
  132. param.range
  133. );
  134. dep.optional = true;
  135. dep.loc = Object.create(expr.loc);
  136. dep.loc.index = idx;
  137. parser.state.module.addDependency(dep);
  138. });
  139. }
  140. });
  141. parser.hooks.expression
  142. .for("module.hot")
  143. .tap("HotModuleReplacementPlugin", ParserHelpers.skipTraversal);
  144. };
  145. compiler.hooks.compilation.tap(
  146. "HotModuleReplacementPlugin",
  147. (compilation, { normalModuleFactory }) => {
  148. const hotUpdateChunkTemplate = compilation.hotUpdateChunkTemplate;
  149. if (!hotUpdateChunkTemplate) return;
  150. compilation.dependencyFactories.set(ConstDependency, new NullFactory());
  151. compilation.dependencyTemplates.set(
  152. ConstDependency,
  153. new ConstDependency.Template()
  154. );
  155. compilation.dependencyFactories.set(
  156. ModuleHotAcceptDependency,
  157. normalModuleFactory
  158. );
  159. compilation.dependencyTemplates.set(
  160. ModuleHotAcceptDependency,
  161. new ModuleHotAcceptDependency.Template()
  162. );
  163. compilation.dependencyFactories.set(
  164. ModuleHotDeclineDependency,
  165. normalModuleFactory
  166. );
  167. compilation.dependencyTemplates.set(
  168. ModuleHotDeclineDependency,
  169. new ModuleHotDeclineDependency.Template()
  170. );
  171. compilation.hooks.record.tap(
  172. "HotModuleReplacementPlugin",
  173. (compilation, records) => {
  174. if (records.hash === compilation.hash) return;
  175. records.hash = compilation.hash;
  176. records.moduleHashs = {};
  177. for (const module of compilation.modules) {
  178. const identifier = module.identifier();
  179. records.moduleHashs[identifier] = module.hash;
  180. }
  181. records.chunkHashs = {};
  182. for (const chunk of compilation.chunks) {
  183. records.chunkHashs[chunk.id] = chunk.hash;
  184. }
  185. records.chunkModuleIds = {};
  186. for (const chunk of compilation.chunks) {
  187. records.chunkModuleIds[chunk.id] = Array.from(
  188. chunk.modulesIterable,
  189. m => m.id
  190. );
  191. }
  192. }
  193. );
  194. let initialPass = false;
  195. let recompilation = false;
  196. compilation.hooks.afterHash.tap("HotModuleReplacementPlugin", () => {
  197. let records = compilation.records;
  198. if (!records) {
  199. initialPass = true;
  200. return;
  201. }
  202. if (!records.hash) initialPass = true;
  203. const preHash = records.preHash || "x";
  204. const prepreHash = records.prepreHash || "x";
  205. if (preHash === compilation.hash) {
  206. recompilation = true;
  207. compilation.modifyHash(prepreHash);
  208. return;
  209. }
  210. records.prepreHash = records.hash || "x";
  211. records.preHash = compilation.hash;
  212. compilation.modifyHash(records.prepreHash);
  213. });
  214. compilation.hooks.shouldGenerateChunkAssets.tap(
  215. "HotModuleReplacementPlugin",
  216. () => {
  217. if (multiStep && !recompilation && !initialPass) return false;
  218. }
  219. );
  220. compilation.hooks.needAdditionalPass.tap(
  221. "HotModuleReplacementPlugin",
  222. () => {
  223. if (multiStep && !recompilation && !initialPass) return true;
  224. }
  225. );
  226. compilation.hooks.additionalChunkAssets.tap(
  227. "HotModuleReplacementPlugin",
  228. () => {
  229. const records = compilation.records;
  230. if (records.hash === compilation.hash) return;
  231. if (
  232. !records.moduleHashs ||
  233. !records.chunkHashs ||
  234. !records.chunkModuleIds
  235. )
  236. return;
  237. for (const module of compilation.modules) {
  238. const identifier = module.identifier();
  239. let hash = module.hash;
  240. module.hotUpdate = records.moduleHashs[identifier] !== hash;
  241. }
  242. const hotUpdateMainContent = {
  243. h: compilation.hash,
  244. c: {}
  245. };
  246. for (const key of Object.keys(records.chunkHashs)) {
  247. const chunkId = isNaN(+key) ? key : +key;
  248. const currentChunk = compilation.chunks.find(
  249. chunk => `${chunk.id}` === key
  250. );
  251. if (currentChunk) {
  252. const newModules = currentChunk
  253. .getModules()
  254. .filter(module => module.hotUpdate);
  255. const allModules = new Set();
  256. for (const module of currentChunk.modulesIterable) {
  257. allModules.add(module.id);
  258. }
  259. const removedModules = records.chunkModuleIds[chunkId].filter(
  260. id => !allModules.has(id)
  261. );
  262. if (newModules.length > 0 || removedModules.length > 0) {
  263. const source = hotUpdateChunkTemplate.render(
  264. chunkId,
  265. newModules,
  266. removedModules,
  267. compilation.hash,
  268. compilation.moduleTemplates.javascript,
  269. compilation.dependencyTemplates
  270. );
  271. const filename = compilation.getPath(hotUpdateChunkFilename, {
  272. hash: records.hash,
  273. chunk: currentChunk
  274. });
  275. compilation.additionalChunkAssets.push(filename);
  276. compilation.assets[filename] = source;
  277. hotUpdateMainContent.c[chunkId] = true;
  278. currentChunk.files.push(filename);
  279. compilation.hooks.chunkAsset.call(currentChunk, filename);
  280. }
  281. } else {
  282. hotUpdateMainContent.c[chunkId] = false;
  283. }
  284. }
  285. const source = new RawSource(JSON.stringify(hotUpdateMainContent));
  286. const filename = compilation.getPath(hotUpdateMainFilename, {
  287. hash: records.hash
  288. });
  289. compilation.assets[filename] = source;
  290. }
  291. );
  292. const mainTemplate = compilation.mainTemplate;
  293. mainTemplate.hooks.hash.tap("HotModuleReplacementPlugin", hash => {
  294. hash.update("HotMainTemplateDecorator");
  295. });
  296. mainTemplate.hooks.moduleRequire.tap(
  297. "HotModuleReplacementPlugin",
  298. (_, chunk, hash, varModuleId) => {
  299. return `hotCreateRequire(${varModuleId})`;
  300. }
  301. );
  302. mainTemplate.hooks.requireExtensions.tap(
  303. "HotModuleReplacementPlugin",
  304. source => {
  305. const buf = [source];
  306. buf.push("");
  307. buf.push("// __webpack_hash__");
  308. buf.push(
  309. mainTemplate.requireFn +
  310. ".h = function() { return hotCurrentHash; };"
  311. );
  312. return Template.asString(buf);
  313. }
  314. );
  315. const needChunkLoadingCode = chunk => {
  316. for (const chunkGroup of chunk.groupsIterable) {
  317. if (chunkGroup.chunks.length > 1) return true;
  318. if (chunkGroup.getNumberOfChildren() > 0) return true;
  319. }
  320. return false;
  321. };
  322. mainTemplate.hooks.bootstrap.tap(
  323. "HotModuleReplacementPlugin",
  324. (source, chunk, hash) => {
  325. source = mainTemplate.hooks.hotBootstrap.call(source, chunk, hash);
  326. return Template.asString([
  327. source,
  328. "",
  329. hotInitCode
  330. .replace(/\$require\$/g, mainTemplate.requireFn)
  331. .replace(/\$hash\$/g, JSON.stringify(hash))
  332. .replace(/\$requestTimeout\$/g, requestTimeout)
  333. .replace(
  334. /\/\*foreachInstalledChunks\*\//g,
  335. needChunkLoadingCode(chunk)
  336. ? "for(var chunkId in installedChunks)"
  337. : `var chunkId = ${JSON.stringify(chunk.id)};`
  338. )
  339. ]);
  340. }
  341. );
  342. mainTemplate.hooks.globalHash.tap(
  343. "HotModuleReplacementPlugin",
  344. () => true
  345. );
  346. mainTemplate.hooks.currentHash.tap(
  347. "HotModuleReplacementPlugin",
  348. (_, length) => {
  349. if (isFinite(length)) {
  350. return `hotCurrentHash.substr(0, ${length})`;
  351. } else {
  352. return "hotCurrentHash";
  353. }
  354. }
  355. );
  356. mainTemplate.hooks.moduleObj.tap(
  357. "HotModuleReplacementPlugin",
  358. (source, chunk, hash, varModuleId) => {
  359. return Template.asString([
  360. `${source},`,
  361. `hot: hotCreateModule(${varModuleId}),`,
  362. "parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),",
  363. "children: []"
  364. ]);
  365. }
  366. );
  367. // TODO add HMR support for javascript/esm
  368. normalModuleFactory.hooks.parser
  369. .for("javascript/auto")
  370. .tap("HotModuleReplacementPlugin", addParserPlugins);
  371. normalModuleFactory.hooks.parser
  372. .for("javascript/dynamic")
  373. .tap("HotModuleReplacementPlugin", addParserPlugins);
  374. compilation.hooks.normalModuleLoader.tap(
  375. "HotModuleReplacementPlugin",
  376. context => {
  377. context.hot = true;
  378. }
  379. );
  380. }
  381. );
  382. }
  383. };
  384. const hotInitCode = Template.getFunctionContent(
  385. require("./HotModuleReplacement.runtime")
  386. );