chore: update defaults #552

cap-Bernardito · 2020-07-20T11:49:48Z

This PR contains a:

Motivation / Use-Case

update defaults
update dependencies
remove hmr option in favor Hot Module Replacement
remove reloadAll option
remove moduleFilename option in favor filename option
update deprecated hooks for webpack 5

Breaking Changes

remove hmr option in favor Hot Module Replacement
remove reloadAll option
remove moduleFilename option in favor filename option

Additional Info

No

codecov · 2020-07-20T11:51:36Z

Codecov Report

Merging #552 into master will decrease coverage by 1.62%.
The diff coverage is 82.06%.

@@            Coverage Diff             @@
##           master     #552      +/-   ##
==========================================
- Coverage   88.55%   86.92%   -1.63%     
==========================================
  Files           5        6       +1     
  Lines         428      520      +92     
  Branches       96      129      +33     
==========================================
+ Hits          379      452      +73     
- Misses         47       63      +16     
- Partials        2        5       +3

Impacted Files	Coverage Δ
src/CssChunkLoadingRuntimeModule.js	`55.88% <55.88%> (ø)`
src/index.js	`89.10% <84.82%> (+1.25%)`	⬆️
src/loader.js	`90.90% <97.05%> (+1.43%)`	⬆️
src/hmr/hotModuleReplacement.js	`86.11% <100.00%> (-1.86%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b146549...6e56877. Read the comment docs.

sokra · 2020-07-23T17:47:35Z

src/index.js

+              chunk.filenameTemplate || chunk.hasRuntime()
+                ? this.options.filename
+                : this.options.chunkFilename;


Suggested change

chunk.filenameTemplate || chunk.hasRuntime()

? this.options.filename

: this.options.chunkFilename;

chunk.filenameTemplate || (chunk.hasRuntime() || chunk.isOnlyInitial()

? this.options.filename

: this.options.chunkFilename);

sokra · 2020-07-23T17:48:29Z

src/index.js

+  updateHash(hash, chunkGraph) {
+    super.updateHash(hash, chunkGraph);


Suggested change

updateHash(hash, chunkGraph) {

super.updateHash(hash, chunkGraph);

updateHash(hash, context) {

super.updateHash(hash, context);

sokra · 2020-07-23T17:50:29Z

src/index.js

+      ) {
+        webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(
+          compilation
+        ).chunkHash.tap(pluginName, (chunk, hash) => {


This will be unneeded once the logic uses a RuntimeModule as the content of runtime modules is hashed and added to the chunk hash automatically

sokra · 2020-07-23T17:54:58Z

src/index.js


      const { mainTemplate } = compilation;

      mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {


All this runtime code should use a RuntimeModule in webpack 5.

Something like CssChunkLoadingRuntimeModule.

A runtime module can be added like that:

compilation.hooks.runtimeRequirementInTree .for(RuntimeGlobals.ensureChunkHandlers) .tap(pluginName, (chunk, set) => { compilation.addRuntimeModule(chunk, new CssChunkLoadingRuntimeModule()); });

Take a look at ReadFileChunkLoadingRuntimeModule in webpack for an example how to do that.

Technically you can put the HMR logic there too, but we can leave this for another PR.

cap-Bernardito · 2020-07-24T17:35:47Z

src/CssChunkLoadingRuntimeModule.js

+            `${fn}.n = ${runtimeTemplate.basicFunction(
+              'chunkId, promises',
+              Template.indent([
+                // source,


@sokra Should we add sourse here for webpack5?

cap-Bernardito · 2020-07-24T17:37:35Z

@sokra After updating hooks, hmr broke in webpack 5. What could be the reason?

｢wdm｣: caused by plugins in Compilation.hooks.processAssets
Error: Path variable [contenthash] not implemented in this context: [contenthash].css
    at fn (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:52:11)
    at fn (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:40:16)
    at /media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:275:12
    at String.replace (<anonymous>)
    at replacePathVariables (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:268:14)
    at Hook.eval [as call] (eval at create (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:16)
    at Compilation.getAssetPathWithInfo (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/Compilation.js:2860:40)
    at Compilation.getPathWithInfo (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/Compilation.js:2836:15)
    at /media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/HotModuleReplacementPlugin.js:460:27
    at Hook.eval [as callAsync] (eval at create (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
ℹ ｢wdm｣: wait until bundle finished: /dist/a02929665a080f5a7082.hot-update.json

sokra

Looks good for a first step. There are probably a few places where webpack 5 support can be improved, but this seem to good to merge after these nitpicks.

sokra · 2020-07-31T06:47:58Z

src/CssChunkLoadingRuntimeModule.js

+            `${fn}.n = ${runtimeTemplate.basicFunction(
+              'chunkId, promises',
+              Template.indent([
+                // source,


sokra · 2020-07-31T06:53:44Z

src/loader.js

-      });
-    });
-  });
+    delete this._compilation.assets[childFilename];


This will not remove things like source map, .gz version, etc. I like the old way more, which removes all chunk related assets. Was there something broken with it?

No, it was not. Just a warning about a deprecated hook.
I redid it as it was with the replacement of the hook.

src/CssChunkLoadingRuntimeModule.js

+    const fn = RuntimeGlobals.ensureChunkHandlers;
+    const { compilation, chunk } = this;
+    const { runtimeTemplate } = compilation;
+    const withCompat = this.runtimeRequirements.has(


src/CssChunkLoadingRuntimeModule.js

+      ),
+      '}',
+      '',
+      withCompat


src/index.js

sokra · 2020-07-31T07:07:35Z

src/index.js

    this.buildMeta = {};
    callback();
  }



CssModule should implement codeGeneration() and getSourceTypes()

getSourceTypes() should return a special source type for css e. g. MODULE_TYPE.

codeGeneration, now always returns an empty sources. What should codeGeneration generate in our case, when we indicate getSourceTypes()?
Сould you please explain in more detail?

// codeGeneration now returns empty sources { sources: Map {}, runtimeRequirements: Set { 'module', '__webpack_exports__', '__webpack_require__' } }

sokra · 2020-07-31T07:14:07Z

test/cases/hmr/expected/webpack-5/main.js

@@ -1,7 +1,3755 @@
 /******/ (() => { // webpackBootstrap
-/******/ 	/************************************************************************/
+/******/ 	var __webpack_modules__ = ([


I don't think snapshotting to complete output file is a good idea. Neither for 4 or 5.

sokra · 2020-07-31T07:20:28Z

@sokra After updating hooks, hmr broke in webpack 5. What could be the reason?

｢wdm｣: caused by plugins in Compilation.hooks.processAssets
Error: Path variable [contenthash] not implemented in this context: [contenthash].css
    at fn (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:52:11)
    at fn (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:40:16)
    at /media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:275:12
    at String.replace (<anonymous>)
    at replacePathVariables (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/TemplatedPathPlugin.js:268:14)
    at Hook.eval [as call] (eval at create (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:16)
    at Compilation.getAssetPathWithInfo (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/Compilation.js:2860:40)
    at Compilation.getPathWithInfo (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/Compilation.js:2836:15)
    at /media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/lib/HotModuleReplacementPlugin.js:460:27
    at Hook.eval [as callAsync] (eval at create (/media/veracrypt1/OS/mini-css-extract-plugin/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
ℹ ｢wdm｣: wait until bundle finished: /dist/a02929665a080f5a7082.hot-update.json

This happens when contentHash is undefined for a chunk. Here a HotUpdateChunk. Usually plugins set the contentHash in Compilation.hooks.contenthash. You should do the same for all CssModules in a chunk.

sokra · 2020-07-31T07:35:32Z

This happens when contentHash is undefined for a chunk. Here a HotUpdateChunk. Usually plugins set the contentHash in Compilation.hooks.contenthash. You should do the same for all CssModules in a chunk.

Actually you already do that correctly. Seem like this is not called for HotUpdateChunk, which mean [contenthash] can't be used for HotUpdateChunks. This probably also doesn't work for normal javascript when hotUpdateChunkFilename contains [contenthash].

The reason why it's breaking here is:

renderManifest is also called for HotUpdateChunk
Plugins are expected to generate an hot update instead of a normal chunk.
These chunks use a different filenameTemplate -> output.hotUpdateChunkFilename
As we can't generate a css patch anyway, the plugin should do nothing for HotUpdateChunks in renderManifest
It won't download these patches anyway as the HMR code is missing in the RuntimeModule
That should resolve the problem.

In general this is how HMR works usually for these kind of plugins for webpack 5:

In the RuntimeModule the plugin would add an handler for RuntimeGlobals.hmrDownloadUpdateHandlers to download the hot update chunk when requested. This is very similar to RuntimeGlobals.ensureChunkHandlers gets trigger by import().

In this handler they also push an applyHandler to a list, which gets called once the HMR update should be applied.

In this applyHandler the runtime code does the necessary updates to the modules to reflect the new state.

This plugin can also use this to implement HMR.

Register a hmrDownloadUpdateHandler which loads the updated stylesheet in a disabled link tag (media="never").
In the apply handler enable the link tag and remove the old one.

sokra · 2020-07-31T07:36:03Z

This plugin can also use this to implement HMR.

Register a hmrDownloadUpdateHandler which loads the updated stylesheet in a disabled link tag (media="never").

In the apply handler enable the link tag and remove the old one.

This might be implemented in another PR? @evilebottnawi

Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>

alexander-akait · 2020-10-09T11:16:05Z

Close in favor #602

chore: update defaults

66d43fa

cap-Bernardito force-pushed the chore-update-defaults branch from 4a6e9fb to 66d43fa Compare July 20, 2020 13:28

chore: update dependencies

f9c75ac

alexander-akait mentioned this pull request Jul 21, 2020

refactor: upgrade loader-utils #554

Closed

6 tasks

refactor: remove hmr option in favor Hot Module Replacement

d6736cc

cap-Bernardito force-pushed the chore-update-defaults branch from d7ddfa9 to d6736cc Compare July 21, 2020 16:53

cap-Bernardito added 3 commits July 22, 2020 13:10

refactor: remove reloadAll option

23c7b9f

refactor: remove moduleFilename option in favor filename option

7d24229

refactor: update deprecated hooks

ffded7a

cap-Bernardito force-pushed the chore-update-defaults branch from 4292ddb to ffded7a Compare July 23, 2020 17:21

cap-Bernardito marked this pull request as ready for review July 23, 2020 17:24

sokra requested changes Jul 23, 2020

View reviewed changes

refactor: add runtimeRequirementInTree hook for webpack 5

c2ad59d

cap-Bernardito force-pushed the chore-update-defaults branch from d20b810 to c2ad59d Compare July 24, 2020 17:30

cap-Bernardito commented Jul 24, 2020

View reviewed changes

alexander-akait mentioned this pull request Jul 27, 2020

dart-sass fails on transitive module imports found in 3rd-party modules webpack/sass-loader#872

Closed

sokra requested changes Jul 31, 2020

View reviewed changes

cap-Bernardito and others added 2 commits August 3, 2020 12:24

Update src/index.js

4fcb568

Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>

refactor: code

6e56877

alexander-akait closed this Oct 9, 2020

alexander-akait deleted the chore-update-defaults branch November 4, 2020 18:26

		updateHash(hash, chunkGraph) {
		super.updateHash(hash, chunkGraph);


		const { mainTemplate } = compilation;

		mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {

Uh oh!

chore: update defaults #552

chore: update defaults #552

Uh oh!

Conversation

cap-Bernardito commented Jul 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation / Use-Case

Breaking Changes

Additional Info

Uh oh!

codecov bot commented Jul 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cap-Bernardito commented Jul 24, 2020

Uh oh!

sokra left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sokra commented Jul 31, 2020

Uh oh!

sokra commented Jul 31, 2020

Uh oh!

sokra commented Jul 31, 2020

Uh oh!

alexander-akait commented Oct 9, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cap-Bernardito commented Jul 20, 2020 •

edited

Loading

codecov bot commented Jul 20, 2020 •

edited

Loading