選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

HotModuleReplacementPlugin.js 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  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 {
  272. path: filename,
  273. info: assetInfo
  274. } = compilation.getPathWithInfo(hotUpdateChunkFilename, {
  275. hash: records.hash,
  276. chunk: currentChunk
  277. });
  278. compilation.additionalChunkAssets.push(filename);
  279. compilation.emitAsset(
  280. filename,
  281. source,
  282. Object.assign({ hotModuleReplacement: true }, assetInfo)
  283. );
  284. hotUpdateMainContent.c[chunkId] = true;
  285. currentChunk.files.push(filename);
  286. compilation.hooks.chunkAsset.call(currentChunk, filename);
  287. }
  288. } else {
  289. hotUpdateMainContent.c[chunkId] = false;
  290. }
  291. }
  292. const source = new RawSource(JSON.stringify(hotUpdateMainContent));
  293. const {
  294. path: filename,
  295. info: assetInfo
  296. } = compilation.getPathWithInfo(hotUpdateMainFilename, {
  297. hash: records.hash
  298. });
  299. compilation.emitAsset(
  300. filename,
  301. source,
  302. Object.assign({ hotModuleReplacement: true }, assetInfo)
  303. );
  304. }
  305. );
  306. const mainTemplate = compilation.mainTemplate;
  307. mainTemplate.hooks.hash.tap("HotModuleReplacementPlugin", hash => {
  308. hash.update("HotMainTemplateDecorator");
  309. });
  310. mainTemplate.hooks.moduleRequire.tap(
  311. "HotModuleReplacementPlugin",
  312. (_, chunk, hash, varModuleId) => {
  313. return `hotCreateRequire(${varModuleId})`;
  314. }
  315. );
  316. mainTemplate.hooks.requireExtensions.tap(
  317. "HotModuleReplacementPlugin",
  318. source => {
  319. const buf = [source];
  320. buf.push("");
  321. buf.push("// __webpack_hash__");
  322. buf.push(
  323. mainTemplate.requireFn +
  324. ".h = function() { return hotCurrentHash; };"
  325. );
  326. return Template.asString(buf);
  327. }
  328. );
  329. const needChunkLoadingCode = chunk => {
  330. for (const chunkGroup of chunk.groupsIterable) {
  331. if (chunkGroup.chunks.length > 1) return true;
  332. if (chunkGroup.getNumberOfChildren() > 0) return true;
  333. }
  334. return false;
  335. };
  336. mainTemplate.hooks.bootstrap.tap(
  337. "HotModuleReplacementPlugin",
  338. (source, chunk, hash) => {
  339. source = mainTemplate.hooks.hotBootstrap.call(source, chunk, hash);
  340. return Template.asString([
  341. source,
  342. "",
  343. hotInitCode
  344. .replace(/\$require\$/g, mainTemplate.requireFn)
  345. .replace(/\$hash\$/g, JSON.stringify(hash))
  346. .replace(/\$requestTimeout\$/g, requestTimeout)
  347. .replace(
  348. /\/\*foreachInstalledChunks\*\//g,
  349. needChunkLoadingCode(chunk)
  350. ? "for(var chunkId in installedChunks)"
  351. : `var chunkId = ${JSON.stringify(chunk.id)};`
  352. )
  353. ]);
  354. }
  355. );
  356. mainTemplate.hooks.globalHash.tap(
  357. "HotModuleReplacementPlugin",
  358. () => true
  359. );
  360. mainTemplate.hooks.currentHash.tap(
  361. "HotModuleReplacementPlugin",
  362. (_, length) => {
  363. if (isFinite(length)) {
  364. return `hotCurrentHash.substr(0, ${length})`;
  365. } else {
  366. return "hotCurrentHash";
  367. }
  368. }
  369. );
  370. mainTemplate.hooks.moduleObj.tap(
  371. "HotModuleReplacementPlugin",
  372. (source, chunk, hash, varModuleId) => {
  373. return Template.asString([
  374. `${source},`,
  375. `hot: hotCreateModule(${varModuleId}),`,
  376. "parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),",
  377. "children: []"
  378. ]);
  379. }
  380. );
  381. // TODO add HMR support for javascript/esm
  382. normalModuleFactory.hooks.parser
  383. .for("javascript/auto")
  384. .tap("HotModuleReplacementPlugin", addParserPlugins);
  385. normalModuleFactory.hooks.parser
  386. .for("javascript/dynamic")
  387. .tap("HotModuleReplacementPlugin", addParserPlugins);
  388. compilation.hooks.normalModuleLoader.tap(
  389. "HotModuleReplacementPlugin",
  390. context => {
  391. context.hot = true;
  392. }
  393. );
  394. }
  395. );
  396. }
  397. };
  398. const hotInitCode = Template.getFunctionContent(
  399. require("./HotModuleReplacement.runtime")
  400. );