webpack 4 support

[GuillaumeCisco]

Hey there @faceyspacey
Hope you are doing well.

I was messing around with the next version of webpack i.e 4.0.0-beta.0 and ran into an issue when trying to compile with it.

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/home/guillaume/Projects/guillaumecisco/node_modules/webpack/lib/Chunk.js:463:9)
    at /home/guillaume/Projects/guillaumecisco/node_modules/extract-css-chunks-webpack-plugin/index.js:243:40
    at Array.forEach (<anonymous>)
    at ExtractTextPlugin.<anonymous> (/home/guillaume/Projects/guillaumecisco/node_modules/extract-css-chunks-webpack-plugin/index.js:238:11)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/guillaume/Projects/guillaumecisco/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/guillaume/Projects/guillaumecisco/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/home/guillaume/Projects/guillaumecisco/node_modules/webpack/lib/Compilation.js:789:27)
    at hooks.make.callAsync.err (/home/guillaume/Projects/guillaumecisco/node_modules/webpack/lib/Compiler.js:439:17)
    at _err0 (eval at create (/home/guillaume/Projects/guillaumecisco/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/home/guillaume/Projects/guillaumecisco/node_modules/webpack/lib/Compilation.js:672:11)
    at processModuleDependencies.err (/home/guillaume/Projects/guillaumecisco/node_modules/webpack/lib/Compilation.js:614:8)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

Looks like the exact same problem as webpack-contrib/extract-text-webpack-plugin#701

Let me know if I can help further.
🤙

[GuillaumeCisco]

For information, I modified a little the code present here:
https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/index.js#L238
with:

chunks.forEach(function(chunk, i) {
		var extractedChunk = extractedChunks[i];
		extractedChunk.index = i;
		extractedChunk.originalChunk = chunk;
		extractedChunk.name = chunk.name;
                extractedChunk.groupsIterable = chunk.groupsIterable;
                // chunk.chunks.forEach(function(c) {
                //     extractedChunk.addChunk(extractedChunks[chunks.indexOf(c)]);
                // });
                // chunk.parents.forEach(function(c) {
                //     extractedChunk.addParent(extractedChunks[chunks.indexOf(c)]);
                // });
        });

And I have no more errors.
But this is absolutely not optimal, and I'm still discovering what this code should do.

The new extractedChunk seems not to have addChunk/addParent methods anymore as described:
https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

Chunk graph and ChunkGroups
A major change happened with the chunk graph. In webpack 3 and lower chunks were connected with parent-child-relationships and contain modules. A chunk with multiple parents could only rely on the assumption that at least one parent is already loaded at runtime.

These schema is insufficient for advanced optimization, especially when aggressively splitting chunks into smaller pieces.

The new chunk graph in webpack 4 has chunk groups connected via parent-child-relationships which contain chunks which contain modules. All chunks of a chunk group are loaded in parallel and can rely on the fact that at least one parent chunk group is already loaded at runtime.

Chunk groups do not affect the output. Only chunks and modules are known at runtime. They are only used for optimization.

An AsyncDependenciesBlock (import()) now points to a single chunk group, instead of to a list of chunks as in webpack ≤ 3.

In addition to that change some mapXXX and forEachXXX helper methods in Module and Chunk were removed/deprecated in favor of using Array.from(xxxIterable).

[GuillaumeCisco]

One more information.
We can compare the two files from webpack 3 to 4
https://github.com/webpack/webpack/blob/master/lib/Chunk.js
https://github.com/webpack/webpack/blob/next/lib/Chunk.js

I still don't understand very well what does extract-css-chunks-webpack-plugin in this scope so I'm not sure how to create the migration. I hope all these informations will help :)

[faceyspacey]

thanks @GuillaumeCisco . This is a good start to diagnosing what must be done. I guess once extract-text-webpack-plugin solves it, we can easily do the same over here.

[ethersage]

webpack-contrib/extract-text-webpack-plugin#701 (comment) 🎉

[GuillaumeCisco]

I've just tested with the last version of extract-text-webpack-plugin and my code works well.

[franjohn21]

It looks like extracting CSS chunks will be supported in webpack 4 via https://github.com/webpack-contrib/mini-css-extract-plugin

[faceyspacey]

Yup!

[davidfurlong]

I've just tested with the last version of extract-text-webpack-plugin and my code works well.

👍 1

Does this mean this issue can be closed @GuillaumeCisco ?

[GuillaumeCisco]

Unfortunately not @davidfurlong .
I've only tested the version of extract-text-webpack-plugin which support webpack 4. This project does not deals with chunks as extract-css-chunks-webpack-plugin does.
I did not yet try https://github.com/webpack-contrib/mini-css-extract-plugin so I don't know if we should give up extract-css-chunks-webpack-plugin for now.
Right now a css file is created for every controlled chunks I'm declaring in optimization.splitChunks, and it is totally unnecessary. So extract-text-webpack-plugin absolutely does not serve my needs.

Furthermore the port towards webpack 4 from @izaakschroeder is still not finished #61

Maybe we should wait a bit further.

[zahidulmcc]

@faceyspacey any estimated timeline for webpack 4 support for your package extract-css-chunks-webpack-plugin?

[faceyspacey]

if this is gonna do it: https://github.com/webpack-contrib/mini-css-extract-plugin , it doesn't seem like a good use of time unfortunately.

[zahidulmcc]

Ok thanks @faceyspacey

[manuelbieh]

mini-css-extract-plugin seems to be pretty buggy still, unfortunately. Trying to get it working right now and no matter what I do, my generated css files just don't get rebuilt when I change css. That's sooo annoying.

[djorborn]

Also mini-css-extract-plugin does not support HMR yet. Are there any css extractors that support HMR?

[borisding]

mini-css-extract-plugin does not support HMR for time being. May use style-loader for development mode instead of MiniCssExtractPlugin.loader for css changes. more info:
webpack-contrib/mini-css-extract-plugin#34

[ScriptedAlchemy]

Opening pull request soon for webpack 4 support

[faceyspacey]

@zackljackson one of our users forked it already and made it work (just this week). Maybe talk with him on twitter:

https://twitter.com/simon_skiscool/status/996286374578917376

[ScriptedAlchemy]

Thanks I’ll touch base with him, either this or moving to mini-css-chunk plug-in

[simonjoom]

i can just share the code.; it's working just composition between the last webpack-text-chunk@next and some relevant code from extract-css-chunks-webpack-plugin.

about mini-css-extract-plugin i used it for other boilerplate, it's work but i'm not enough good to understand how is it and how we can merge it with extract-css-chunks-webpack-plugin

[simonjoom]

i create a repo with the code changed.
https://github.com/simonjoom/extract-css-chunks-webpack-plugin-webpack4

relevant line who do the trick is here on this line:

L327
extractedChunk.groupsIterable = chunk.groupsIterable;

Sorry if i did not test all some mods

I just merge on loader.js and index.js from the new webpack-text-plugin@next with the extract-css-chunks-webpack-plugin
and put the 'hooks mode'
childCompiler.hooks.compilation.tap(...

Who i have to say i have no idea all the effect.
But for me is good enough i tested and work in dev and in production with redux-first-router and react-component-universal so i can work with webpack 4,
The HMR on css work too

I have to say it's amazing what did faceyspacey with his react-component-universal
I recommand to try the last branch in test mode rudy 👍
https://github.com/zackljackson/redux-first-router/tree/rudy-next-temp

[ScriptedAlchemy]

Hey Simon

Thanks for touch base here! I’ll update our plugin accordingly. When there’s a pittle more time I will also look at mini-css-extract at a later stage and see if it’s worth extending/switching to. It’s not reloading is not well integrated.

Thanks again for the share!

[simonjoom]

just a comment about the mod:

if i use like webpack-text-plugin@next
this code:
for (const chunkGroup of chunk.groupsIterable) {
extractedChunk.addGroup(chunkGroup);
}
instead directly ref it: (like described upper)
just extractedChunk.groupsIterable = chunk.groupsIterable;

i have got some problem in development mode..
i'm not sure how to put entrypoints of extractedChunk there and to program the correct way
this is not working:
extractedChunk.entrypoints = chunkGroup.entrypoints;

just with extractedChunk.groupsIterable = chunk.groupsIterable;
in output i have ;Entrypoint undefined = extract-text-webpack-plugin-output-filename
i'm not sure it's relevant but...

[ScriptedAlchemy]

Hey guys! I just finished a fully working solution. True hot reloading new files, no style-loader in dev. Pretty much exactly what we want / need / had.

I’m looking for beta testers ❤️ I’ll be opening a branch tomorrow for everyone to look at and a PR shortly after.

If you can improve it .... PLEASE PR MY BRANCH.

Apologies it took long, thank you for your patience and continued support! I know this has been a challenge in the greater FE community. I’ll try and track down the open issues I’ve seen across the internet, but if you know of a project struggling. Let them know

[rherwig]

So far @zackljackson solution is working on the dev branch of https://github.com/rherwig/template-react-16-ssr

I'm currently looking into testing it in a "real world" progressive web app to see how it behaves using react router, etc...

[ScriptedAlchemy]

This is very encouraging! @rherwig

[ScriptedAlchemy]

@rherwig one thing I realized. I need to add an additional check for production builds

Currently it should work fine, but it'll include an extra couple lines of JS for hot loading. Ill likely only release this in a few hours or tomorrow.

Let me know how it handles

[rherwig]

@zackljackson @faceyspacey
Is there by any chance a planned @next tag? The last is well behind the current master and I would really appreciate this in favor of having to include a git ref :-)

[rajatpharmeasy]

+1 Need this badly.

[ScriptedAlchemy]

Okay guys, I’ll look at making a next tag

[ScriptedAlchemy]

@rajatpharmeasy @rherwig @d3viant0ne @dtonys @davidfurlong

Enjoy fellas! npm I extract-css-chunks-webpack-plugin@next

Ill be pushing updates to this tag from now on, theres very little left to check and do on this side so it'll be merged to master today or tomorrow!

https://www.npmjs.com/package/extract-css-chunks-webpack-plugin/v/3.0.0

[ScriptedAlchemy]

Pull request open 🔥

[rherwig]

I am so gonna integrate this in my template project as soon as it hits master! Tests have been working out great so far :-)

[ScriptedAlchemy]

@rherwig @rajatpharmeasy @GuillaumeCisco @franjohn21 @davidfurlong

🍾🍾🍾 Will be releasing it tomorrow around 10 am EST 🚀🚀🚀

Please note: you'll want to update both the universal-import babel plugin and this one :)

We greatly appreciate your ongoing support and interest in the project. Especially critical feedback received during testing.

🍾🍾🍾 It's our absolute pleasure to provide this update 🚀🚀🚀

Please let us know if theres any issues & PRs are always welcome