Webpack v4.0.0-alpha support #823

Graham42 · 2017-12-12T04:36:44Z

This is ~~a rough go at~~ the code to make tests pass for supporting webpack@4.0.0-alpha-4.

~~I'm not sure that this can be merged with out major version bump since webpack now requires node version >=6 and html-webpack-plugin currently still supports 4 and 5.~~
Edit: This is actually probably fine, if people are using webpack the intersection of supported node versions is >=6, I don't see a need to change the required node version for this plugin.

Status as of webpack@4.0.0-alpha-4:

Caching Tests passing in development mode
Example fixture Tests passing in production mode
Basics Tests passing in development mode

sokra · 2017-12-12T14:31:58Z

lib/compiler.js

+              hash: childCompilation.hash,
+              chunk: entries[0]
+            })
+          : compilation.mainTemplate.hooks.assetPath.call(outputOptions.filename, {


Use compilation.mainTemplate.getAssetPath instead

sokra · 2017-12-12T14:32:55Z

index.js

@@ -71,7 +85,12 @@ HtmlWebpackPlugin.prototype.apply = function (compiler) {
    // Sort chunks
    chunks = self.sortChunks(chunks, self.options.chunksSortMode);
    // Let plugins alter the chunks and the chunk sorting
-    chunks = compilation.applyPluginsWaterfall('html-webpack-plugin-alter-chunks', chunks, { plugin: self });
+    if (compilation.applyPluginsWaterfall) {


reverse the order here: Try new API first, fallback to old API

sokra · 2017-12-12T14:33:01Z

index.js

@@ -313,7 +332,12 @@ HtmlWebpackPlugin.prototype.addFileToAssets = function (filename, compilation) {
  })
  .then(function (results) {
    var basename = path.basename(filename);
-    compilation.fileDependencies.push(filename);
+    if (compilation.fileDependencies.push) {


reverse the order here: Try new API first, fallback to old API

sokra · 2017-12-12T14:33:10Z

index.js

-        return _.extend(pluginArgs, result);
-      });
-  };
+  if (compilation.applyPluginsAsyncWaterfall) {


reverse the order here: Try new API first, fallback to old API

Graham42 · 2017-12-12T22:50:01Z

going to see if there's a better way to view the diffs for fixture tests. the current output is not easy to tell what's wrong. 😕

All of the tests now pass on my machine, but there's a couple still failing in travis.

But don't test webpack 4 on old node versions since it now requires 6 or later.

webpack 4 drops the 'loaders' key on the config

webpack has a completely new plugin interface. See changes to wepack/tapable for in-depth.

In the future the file-loader should move away from loadContext.options and this would not be needed.

Webpack 4 now requires either 'production', 'development', or 'none'.

The new method with AsyncSeriesWaterfallHook already merges the initial value with the result so there's no need to worry about the result not being defined.

Recompiling and caching only really makes sense for development builds.

toposort is non-deterministic when there's a tie. Needed to allow for either result in the test. This happens when A and B both depend on C, dependency graph looks like: A / C \ B Ideally we could pass a tie breaker sort function to toposort to fix this.

Previously was just doing a strait string compare which was very hard to tell what the differences causing the failing were.

Graham42 · 2017-12-13T04:52:01Z

Rebased to clean up the commits. Included the changes suggested from @sokra, thanks for the review.

Tests all pass now 🎉 , However I've made some assumptions which I'd like feedback on.

I think the caching tests only make sense for mode = 'development' because that's how people will be running dev servers that require recompiling.

I think mode = 'production' makes sense for the fixture tests from looking a the other fixture files. I tried generating both production and development variations, and the production ones look more like what's there for webpack 3.

The basic tests I think should be run for both modes but I'm not sure.

donaldpipowitch · 2017-12-22T06:15:05Z

Thank you for the PR. I just tried it against the webpack v4 alpha in a small example and it worked without problems. ✌️

Just got one deprecation warning:

(node:52664) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at HtmlWebpackPlugin.apply (./node_modules/html-webpack-plugin/index.js:59:12)

minification is now on by default for production mode.

Graham42 · 2018-01-08T01:19:34Z

This good to go. The deprecation warnings can be fixed in a separate PR. As it is this PR as it is enables compatibility with webpack-4.0.0-alpha.4. cc @jantimon @TheLarkInn

Graham42 · 2018-01-08T02:01:08Z

Travis is timing out on network requests, going to push again to trigger build

alexandernst · 2018-01-09T19:14:27Z

So... merge?

TheLarkInn · 2018-01-09T20:08:04Z

@Graham42 this looks great to me as well.

@jantimon would you like to release this under '@next' tag similar to how we are shipping alphas? Let me know where we can help.

niieani · 2018-01-17T13:34:59Z

Are there any ETAs on this getting released as an alpha/next/beta?

Graham42 · 2018-01-23T14:21:06Z

Note that this plugin breaks with webpack@4.0.0-alpha-5 because of reliance on old common chunk behaviour.

Not sure when I'll have a chance to look at that, but if someone else wants to work on it, could probably build on top of this branch.

TheLarkInn · 2018-02-12T21:37:50Z

Update: currently jantimon is in Asia for work right now until first week of March. We've forked html-webpack-plugin for now to have the PR sent against there just to ensure people can actually have a chance to test and use this package prior to v4

Would someone like to take the PR and revase against webpack-contrib/html-webpack-plugin ?

quantizor · 2018-02-14T02:30:10Z

Some of the tests also are checking for commonschunk, which no longer exists.

Graham42 · 2018-02-14T02:45:39Z

Continuing this PR over at https://github.com/webpack-contrib/html-webpack-plugin/pull/3

webpack-4.0.0-alpha.5 introduced a large refactor to chunks. This is a corresponding update to handle the new structure. This change introduces an API change to `chunksorter.dependency`. It now requires an additional parameter `chunkGroups` that is available from the compilation object. To read more about the CommonsChunkPlugin changes see: - webpack/webpack#6357 - https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

Tests were green before this so can have higher confidence in this change.

Wanted to update the test fixtures to not use minification, but needed to go back to a stable state to do that.

Appear to all be internal webpack changes. It is a bit painful to review. Certain parts may be easier to see the changes by using the --word-diff-regex flag. Example: git diff --word-diff-regex=[^[:space:]\"\)]+

Need a webpack 4 compatible version.

Perf improvement. Using getParents() causes a full iteration over the parents Set to get an array. Then using map() is a second iteration over the resulting array. By using Array.from(iterable, mapFn) we only iterate once over the internal data structure of parents.

hanxue · 2018-02-22T17:27:19Z

After installing the changes from

npm i -D git://github.com/Graham42/html-webpack-plugin.git#feat/webpack-4

I still get the following error

TypeError: SyncWaterfallHook is not a constructor
    at /a/b/c/node_modules/html-webpack-plugin/index.js:50:56
    at SyncHook.eval [as call] (eval at create (/a/b/c/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:11:1)

Manage to resolve this error by installing the latest tapable v1.0.0

niemyjski · 2018-02-27T22:51:08Z

Any updates on this?

caseyWebb · 2018-02-27T23:30:22Z

@niemyjski

🛑 If you use HtmlWebpackPlugin

For this release, we gave the ecosystem a month to upgrade any plugins or loaders to use the new webpack 4 API’s. However, Jan Nicklas has been away with work obligations and therefore, we have provided a patched fork of html-webpack-plugin . For now you can install it by doing the following:

$ yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

When Jan returns from overseas work at the end of the month, we plan to merge our fork upstream into jantimon/html-webpack-plugin ! Until then, if you have any issues, you can submit them here!

via: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

deadcoder0904 · 2018-02-28T08:25:00Z

@niemyjski This PR works I tried & you can install it like that on the Medium article or like this

jantimon · 2018-03-01T06:29:34Z

Merged - ty so much @Graham42

ankibalyan · 2018-03-01T08:53:21Z

realeasing something? html-webpack-plugin@4.0.0 or html-webpack-plugin@next?

deadcoder0904 · 2018-03-01T09:00:26Z

Just do npm i --save-dev html-webpack-plugin or yarn add --dev html-webpack-plugin

Its been released on npm

lock · 2018-05-31T09:19:03Z

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Graham42 mentioned this pull request Dec 12, 2017

webpack v4 migration plan #816

Closed

sokra suggested changes Dec 12, 2017

View reviewed changes

Graham42 added 13 commits December 12, 2017 22:47

Add webpack 4 to test matrix

f9608bc

But don't test webpack 4 on old node versions since it now requires 6 or later.

Configure rules instead of loaders

292e027

webpack 4 drops the 'loaders' key on the config

Register plugins in webpack 4 compatible way

ba3a31e

webpack has a completely new plugin interface. See changes to wepack/tapable for in-depth.

Try new APIs first, fallback to old

9c8b0e5

Update fileDependecies to Set

4f62917

Workaround for file-loader

3cf2be4

In the future the file-loader should move away from loadContext.options and this would not be needed.

Add required 'mode' config

6aaaa93

Webpack 4 now requires either 'production', 'development', or 'none'.

Update basic spec to tap plugin in webpack 4 way

1d74933

Remove need for warnings for no-op taps

3e4bcce

The new method with AsyncSeriesWaterfallHook already merges the initial value with the result so there's no need to worry about the result not being defined.

Add examples generated for webpack 4

ea3afa5

Change to cache tests to development mode

a9e3467

Recompiling and caching only really makes sense for development builds.

Fix non-deterministic sort test

a8c072b

toposort is non-deterministic when there's a tie. Needed to allow for either result in the test. This happens when A and B both depend on C, dependency graph looks like: A / C \ B Ideally we could pass a tie breaker sort function to toposort to fix this.

Add better diff matcher for fixture tests

53ea016

Previously was just doing a strait string compare which was very hard to tell what the differences causing the failing were.

Graham42 added 2 commits January 7, 2018 15:50

update webpack alpha version

f60c7a5

Update fixtures for webpack 4.0.0-alpha.4

a3d8f11

minification is now on by default for production mode.

Graham42 changed the title ~~[WIP] Webpack v4 support~~ Webpack v4.0.0-alpha support Jan 8, 2018

Confirm modes for testing, remove TODO comments

fb24cb4

andriijas mentioned this pull request Jan 23, 2018

Update to webpack 4 and integrate automatic vendor code splitting facebook/create-react-app#3878

Closed

robmcguinness mentioned this pull request Jan 26, 2018

Webpack 4 Availity/availity-workflow#140

Closed

michael-ciniawsky mentioned this pull request Feb 13, 2018

Webpack 4 - Plugin could not be registered at 'html-webpack-plugin-alter-asset-tags'. Hook was not found. webpack/webpack#6481

Closed

Update to webpack-4.0.0-beta.1

7c78137

Graham42 added 11 commits February 13, 2018 21:57

Convert webpack version to number just once

8f1c3d0

Make test compatible with webpack chunks changes

82897ad

Configure test fixtures to not use minification

3794144

Update test fixtures

eb641b3

Tests were green before this so can have higher confidence in this change.

Merge branch 'examples-generation' into feat/webpack-4

e623e7e

Wanted to update the test fixtures to not use minification, but needed to go back to a stable state to do that.

Update test fixtures

d7e2306

Appear to all be internal webpack changes. It is a bit painful to review. Certain parts may be easier to see the changes by using the --word-diff-regex flag. Example: git diff --word-diff-regex=[^[:space:]\"\)]+

Update version of extract-text-webpack-plugin

52f76cc

Need a webpack 4 compatible version.

Define extract-text-webpack-plugin peer dependency

20b4a1e

Remove unneeded check

b0cf532

iamakulov mentioned this pull request Feb 23, 2018

Webpack guide updates for webpack 4 google/WebFundamentals#5798

Merged

6 tasks

carloluis mentioned this pull request Feb 24, 2018

update/dependencies carloluis/webpack-demo#1

Merged

sbrunner mentioned this pull request Feb 25, 2018

Update webpack to the latest version 🚀 camptocamp/ngeo#3574

Merged

pi0 mentioned this pull request Feb 26, 2018

✨ Webpack 4 upgrade nuxt/nuxt#2686

Closed

jantimon closed this Mar 1, 2018

lock bot locked as resolved and limited conversation to collaborators May 31, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack v4.0.0-alpha support #823

Webpack v4.0.0-alpha support #823

Graham42 commented Dec 12, 2017 •

edited

Loading

sokra Dec 12, 2017

sokra Dec 12, 2017

sokra Dec 12, 2017

sokra Dec 12, 2017

Graham42 commented Dec 12, 2017 •

edited

Loading

Graham42 commented Dec 13, 2017

donaldpipowitch commented Dec 22, 2017 •

edited

Loading

Graham42 commented Jan 8, 2018

Graham42 commented Jan 8, 2018

alexandernst commented Jan 9, 2018

TheLarkInn commented Jan 9, 2018

niieani commented Jan 17, 2018

Graham42 commented Jan 23, 2018

TheLarkInn commented Feb 12, 2018

quantizor commented Feb 14, 2018

Graham42 commented Feb 14, 2018

hanxue commented Feb 22, 2018

niemyjski commented Feb 27, 2018

caseyWebb commented Feb 27, 2018

deadcoder0904 commented Feb 28, 2018 •

edited

Loading

jantimon commented Mar 1, 2018

ankibalyan commented Mar 1, 2018

deadcoder0904 commented Mar 1, 2018

lock bot commented May 31, 2018

Webpack v4.0.0-alpha support #823

Webpack v4.0.0-alpha support #823

Conversation

Graham42 commented Dec 12, 2017 • edited Loading

sokra Dec 12, 2017

Choose a reason for hiding this comment

sokra Dec 12, 2017

Choose a reason for hiding this comment

sokra Dec 12, 2017

Choose a reason for hiding this comment

sokra Dec 12, 2017

Choose a reason for hiding this comment

Graham42 commented Dec 12, 2017 • edited Loading

Graham42 commented Dec 13, 2017

donaldpipowitch commented Dec 22, 2017 • edited Loading

Graham42 commented Jan 8, 2018

Graham42 commented Jan 8, 2018

alexandernst commented Jan 9, 2018

TheLarkInn commented Jan 9, 2018

niieani commented Jan 17, 2018

Graham42 commented Jan 23, 2018

TheLarkInn commented Feb 12, 2018

quantizor commented Feb 14, 2018

Graham42 commented Feb 14, 2018

hanxue commented Feb 22, 2018

niemyjski commented Feb 27, 2018

caseyWebb commented Feb 27, 2018

deadcoder0904 commented Feb 28, 2018 • edited Loading

jantimon commented Mar 1, 2018

ankibalyan commented Mar 1, 2018

deadcoder0904 commented Mar 1, 2018

lock bot commented May 31, 2018

Graham42 commented Dec 12, 2017 •

edited

Loading

Graham42 commented Dec 12, 2017 •

edited

Loading

donaldpipowitch commented Dec 22, 2017 •

edited

Loading

deadcoder0904 commented Feb 28, 2018 •

edited

Loading