You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

425 lines
13 KiB

4 years ago
  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. // This applies the HMR plugin only to the targeted compiler
  149. // It should not affect child compilations
  150. if (compilation.compiler !== compiler) return;
  151. const hotUpdateChunkTemplate = compilation.hotUpdateChunkTemplate;
  152. if (!hotUpdateChunkTemplate) return;
  153. compilation.dependencyFactories.set(ConstDependency, new NullFactory());
  154. compilation.dependencyTemplates.set(
  155. ConstDependency,
  156. new ConstDependency.Template()
  157. );
  158. compilation.dependencyFactories.set(
  159. ModuleHotAcceptDependency,
  160. normalModuleFactory
  161. );
  162. compilation.dependencyTemplates.set(
  163. ModuleHotAcceptDependency,
  164. new ModuleHotAcceptDependency.Template()
  165. );
  166. compilation.dependencyFactories.set(
  167. ModuleHotDeclineDependency,
  168. normalModuleFactory
  169. );
  170. compilation.dependencyTemplates.set(
  171. ModuleHotDeclineDependency,
  172. new ModuleHotDeclineDependency.Template()
  173. );
  174. compilation.hooks.record.tap(
  175. "HotModuleReplacementPlugin",
  176. (compilation, records) => {
  177. if (records.hash === compilation.hash) return;
  178. records.hash = compilation.hash;
  179. records.moduleHashs = {};
  180. for (const module of compilation.modules) {
  181. const identifier = module.identifier();
  182. records.moduleHashs[identifier] = module.hash;
  183. }
  184. records.chunkHashs = {};
  185. for (const chunk of compilation.chunks) {
  186. records.chunkHashs[chunk.id] = chunk.hash;
  187. }
  188. records.chunkModuleIds = {};
  189. for (const chunk of compilation.chunks) {
  190. records.chunkModuleIds[chunk.id] = Array.from(
  191. chunk.modulesIterable,
  192. m => m.id
  193. );
  194. }
  195. }
  196. );
  197. let initialPass = false;
  198. let recompilation = false;
  199. compilation.hooks.afterHash.tap("HotModuleReplacementPlugin", () => {
  200. let records = compilation.records;
  201. if (!records) {
  202. initialPass = true;
  203. return;
  204. }
  205. if (!records.hash) initialPass = true;
  206. const preHash = records.preHash || "x";
  207. const prepreHash = records.prepreHash || "x";
  208. if (preHash === compilation.hash) {
  209. recompilation = true;
  210. compilation.modifyHash(prepreHash);
  211. return;
  212. }
  213. records.prepreHash = records.hash || "x";
  214. records.preHash = compilation.hash;
  215. compilation.modifyHash(records.prepreHash);
  216. });
  217. compilation.hooks.shouldGenerateChunkAssets.tap(
  218. "HotModuleReplacementPlugin",
  219. () => {
  220. if (multiStep && !recompilation && !initialPass) return false;
  221. }
  222. );
  223. compilation.hooks.needAdditionalPass.tap(
  224. "HotModuleReplacementPlugin",
  225. () => {
  226. if (multiStep && !recompilation && !initialPass) return true;
  227. }
  228. );
  229. compilation.hooks.additionalChunkAssets.tap(
  230. "HotModuleReplacementPlugin",
  231. () => {
  232. const records = compilation.records;
  233. if (records.hash === compilation.hash) return;
  234. if (
  235. !records.moduleHashs ||
  236. !records.chunkHashs ||
  237. !records.chunkModuleIds
  238. )
  239. return;
  240. for (const module of compilation.modules) {
  241. const identifier = module.identifier();
  242. let hash = module.hash;
  243. module.hotUpdate = records.moduleHashs[identifier] !== hash;
  244. }
  245. const hotUpdateMainContent = {
  246. h: compilation.hash,
  247. c: {}
  248. };
  249. for (const key of Object.keys(records.chunkHashs)) {
  250. const chunkId = isNaN(+key) ? key : +key;
  251. const currentChunk = compilation.chunks.find(
  252. chunk => `${chunk.id}` === key
  253. );
  254. if (currentChunk) {
  255. const newModules = currentChunk
  256. .getModules()
  257. .filter(module => module.hotUpdate);
  258. const allModules = new Set();
  259. for (const module of currentChunk.modulesIterable) {
  260. allModules.add(module.id);
  261. }
  262. const removedModules = records.chunkModuleIds[chunkId].filter(
  263. id => !allModules.has(id)
  264. );
  265. if (newModules.length > 0 || removedModules.length > 0) {
  266. const source = hotUpdateChunkTemplate.render(
  267. chunkId,
  268. newModules,
  269. removedModules,
  270. compilation.hash,
  271. compilation.moduleTemplates.javascript,
  272. compilation.dependencyTemplates
  273. );
  274. const {
  275. path: filename,
  276. info: assetInfo
  277. } = compilation.getPathWithInfo(hotUpdateChunkFilename, {
  278. hash: records.hash,
  279. chunk: currentChunk
  280. });
  281. compilation.additionalChunkAssets.push(filename);
  282. compilation.emitAsset(
  283. filename,
  284. source,
  285. Object.assign({ hotModuleReplacement: true }, assetInfo)
  286. );
  287. hotUpdateMainContent.c[chunkId] = true;
  288. currentChunk.files.push(filename);
  289. compilation.hooks.chunkAsset.call(currentChunk, filename);
  290. }
  291. } else {
  292. hotUpdateMainContent.c[chunkId] = false;
  293. }
  294. }
  295. const source = new RawSource(JSON.stringify(hotUpdateMainContent));
  296. const {
  297. path: filename,
  298. info: assetInfo
  299. } = compilation.getPathWithInfo(hotUpdateMainFilename, {
  300. hash: records.hash
  301. });
  302. compilation.emitAsset(
  303. filename,
  304. source,
  305. Object.assign({ hotModuleReplacement: true }, assetInfo)
  306. );
  307. }
  308. );
  309. const mainTemplate = compilation.mainTemplate;
  310. mainTemplate.hooks.hash.tap("HotModuleReplacementPlugin", hash => {
  311. hash.update("HotMainTemplateDecorator");
  312. });
  313. mainTemplate.hooks.moduleRequire.tap(
  314. "HotModuleReplacementPlugin",
  315. (_, chunk, hash, varModuleId) => {
  316. return `hotCreateRequire(${varModuleId})`;
  317. }
  318. );
  319. mainTemplate.hooks.requireExtensions.tap(
  320. "HotModuleReplacementPlugin",
  321. source => {
  322. const buf = [source];
  323. buf.push("");
  324. buf.push("// __webpack_hash__");
  325. buf.push(
  326. mainTemplate.requireFn +
  327. ".h = function() { return hotCurrentHash; };"
  328. );
  329. return Template.asString(buf);
  330. }
  331. );
  332. const needChunkLoadingCode = chunk => {
  333. for (const chunkGroup of chunk.groupsIterable) {
  334. if (chunkGroup.chunks.length > 1) return true;
  335. if (chunkGroup.getNumberOfChildren() > 0) return true;
  336. }
  337. return false;
  338. };
  339. mainTemplate.hooks.bootstrap.tap(
  340. "HotModuleReplacementPlugin",
  341. (source, chunk, hash) => {
  342. source = mainTemplate.hooks.hotBootstrap.call(source, chunk, hash);
  343. return Template.asString([
  344. source,
  345. "",
  346. hotInitCode
  347. .replace(/\$require\$/g, mainTemplate.requireFn)
  348. .replace(/\$hash\$/g, JSON.stringify(hash))
  349. .replace(/\$requestTimeout\$/g, requestTimeout)
  350. .replace(
  351. /\/\*foreachInstalledChunks\*\//g,
  352. needChunkLoadingCode(chunk)
  353. ? "for(var chunkId in installedChunks)"
  354. : `var chunkId = ${JSON.stringify(chunk.id)};`
  355. )
  356. ]);
  357. }
  358. );
  359. mainTemplate.hooks.globalHash.tap(
  360. "HotModuleReplacementPlugin",
  361. () => true
  362. );
  363. mainTemplate.hooks.currentHash.tap(
  364. "HotModuleReplacementPlugin",
  365. (_, length) => {
  366. if (isFinite(length)) {
  367. return `hotCurrentHash.substr(0, ${length})`;
  368. } else {
  369. return "hotCurrentHash";
  370. }
  371. }
  372. );
  373. mainTemplate.hooks.moduleObj.tap(
  374. "HotModuleReplacementPlugin",
  375. (source, chunk, hash, varModuleId) => {
  376. return Template.asString([
  377. `${source},`,
  378. `hot: hotCreateModule(${varModuleId}),`,
  379. "parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),",
  380. "children: []"
  381. ]);
  382. }
  383. );
  384. // TODO add HMR support for javascript/esm
  385. normalModuleFactory.hooks.parser
  386. .for("javascript/auto")
  387. .tap("HotModuleReplacementPlugin", addParserPlugins);
  388. normalModuleFactory.hooks.parser
  389. .for("javascript/dynamic")
  390. .tap("HotModuleReplacementPlugin", addParserPlugins);
  391. compilation.hooks.normalModuleLoader.tap(
  392. "HotModuleReplacementPlugin",
  393. context => {
  394. context.hot = true;
  395. }
  396. );
  397. }
  398. );
  399. }
  400. };
  401. const hotInitCode = Template.getFunctionContent(
  402. require("./HotModuleReplacement.runtime")
  403. );