webpack 4 support #60

GuillaumeCisco · 2018-02-05T16:15:45Z

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.
🤙

The text was updated successfully, but these errors were encountered:

GuillaumeCisco · 2018-02-05T16:54:44Z

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 · 2018-02-05T17:05:26Z

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 · 2018-02-06T10:19:45Z

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.

88kami88 · 2018-02-26T14:26:39Z

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

GuillaumeCisco · 2018-03-02T15:07:58Z

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

franjohn21 · 2018-03-05T02:41:27Z

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

faceyspacey · 2018-03-05T02:44:27Z

Yup!

davidfurlong · 2018-03-05T15:44:29Z

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 · 2018-03-05T16:02:17Z

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 · 2018-03-06T05:26:42Z

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

faceyspacey · 2018-03-06T05:27:50Z

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 · 2018-03-06T05:36:41Z

Ok thanks @faceyspacey

manuelbieh · 2018-03-17T17:36:45Z

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 · 2018-03-18T00:12:42Z

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

borisding · 2018-03-18T05:59:41Z

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 · 2018-05-16T00:46:47Z

Opening pull request soon for webpack 4 support

faceyspacey · 2018-05-16T02:09:05Z

@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 · 2018-05-16T02:16:58Z

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

simonjoom · 2018-05-16T12:04:47Z

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 · 2018-05-16T12:26:42Z

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 · 2018-05-16T13:34:34Z

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 · 2018-05-16T13:45:54Z

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 · 2018-05-27T09:21:21Z

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 · 2018-05-28T20:10:25Z

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 · 2018-05-28T20:21:09Z

This is very encouraging! @rherwig

ScriptedAlchemy · 2018-05-28T20:57:16Z

@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 · 2018-05-31T02:32:26Z

@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 · 2018-05-31T09:50:05Z

+1 Need this badly.

ScriptedAlchemy · 2018-05-31T13:02:10Z

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

ScriptedAlchemy · 2018-05-31T20:44:35Z

@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 · 2018-06-02T00:11:31Z

Pull request open 🔥

rherwig · 2018-06-02T00:32:44Z

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 · 2018-06-04T05:13:42Z

@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

izaakschroeder mentioned this issue Feb 7, 2018

Support webpack@4 and a few other things. #61

Closed

rodneyrehm mentioned this issue Mar 6, 2018

Webpack 4 CSS extract issue webpack/webpack#6687

Closed

dawidvdh mentioned this issue Mar 30, 2018

Chore Upgrades madeagency/reactivity#79

Merged

This was referenced May 28, 2018

Better css solution around the corner teamable-software/css-chunks-html-webpack-plugin#7

Closed

Rudy (Next Major Release) faceyspacey/redux-first-router#218

Closed

This comment has been minimized.

Sign in to view

ScriptedAlchemy self-assigned this May 28, 2018

ScriptedAlchemy modified the milestones: Implement Webpack 4 Support, Implement HMR, Update Docs , Update Tests and Add More May 28, 2018

ScriptedAlchemy mentioned this issue May 30, 2018

[question] webpack 4 + ssr + webpack-hot-middlewar faceyspacey/react-universal-component#118

Closed

zackkirsh mentioned this issue May 30, 2018

Access wrapped component faceyspacey/react-universal-component#119

Closed

ScriptedAlchemy mentioned this issue Jun 2, 2018

feat(*): Webpack 4 Support for Universal CSS Chunks #71

Merged

ScriptedAlchemy mentioned this issue Jun 4, 2018

Force allChunks to true - fix non-deterministic build #63

Merged

ScriptedAlchemy closed this as completed in #71 Jun 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack 4 support #60

webpack 4 support #60

GuillaumeCisco commented Feb 5, 2018 •

edited

Loading

GuillaumeCisco commented Feb 5, 2018 •

edited

Loading

GuillaumeCisco commented Feb 5, 2018 •

edited

Loading

faceyspacey commented Feb 6, 2018

88kami88 commented Feb 26, 2018

GuillaumeCisco commented Mar 2, 2018

franjohn21 commented Mar 5, 2018

faceyspacey commented Mar 5, 2018

davidfurlong commented Mar 5, 2018 •

edited

Loading

GuillaumeCisco commented Mar 5, 2018

zahidulmcc commented Mar 6, 2018

faceyspacey commented Mar 6, 2018

zahidulmcc commented Mar 6, 2018

manuelbieh commented Mar 17, 2018

djorborn commented Mar 18, 2018

borisding commented Mar 18, 2018

ScriptedAlchemy commented May 16, 2018

faceyspacey commented May 16, 2018

ScriptedAlchemy commented May 16, 2018

simonjoom commented May 16, 2018

simonjoom commented May 16, 2018 •

edited

Loading

ScriptedAlchemy commented May 16, 2018

simonjoom commented May 16, 2018

ScriptedAlchemy commented May 27, 2018

This comment has been minimized.

rherwig commented May 28, 2018

ScriptedAlchemy commented May 28, 2018

ScriptedAlchemy commented May 28, 2018

rherwig commented May 31, 2018

rajatpharmeasy commented May 31, 2018

ScriptedAlchemy commented May 31, 2018

ScriptedAlchemy commented May 31, 2018 •

edited

Loading

ScriptedAlchemy commented Jun 2, 2018

rherwig commented Jun 2, 2018

ScriptedAlchemy commented Jun 4, 2018

webpack 4 support #60

webpack 4 support #60

Comments

GuillaumeCisco commented Feb 5, 2018 • edited Loading

GuillaumeCisco commented Feb 5, 2018 • edited Loading

GuillaumeCisco commented Feb 5, 2018 • edited Loading

faceyspacey commented Feb 6, 2018

88kami88 commented Feb 26, 2018

GuillaumeCisco commented Mar 2, 2018

franjohn21 commented Mar 5, 2018

faceyspacey commented Mar 5, 2018

davidfurlong commented Mar 5, 2018 • edited Loading

GuillaumeCisco commented Mar 5, 2018

zahidulmcc commented Mar 6, 2018

faceyspacey commented Mar 6, 2018

zahidulmcc commented Mar 6, 2018

manuelbieh commented Mar 17, 2018

djorborn commented Mar 18, 2018

borisding commented Mar 18, 2018

ScriptedAlchemy commented May 16, 2018

faceyspacey commented May 16, 2018

ScriptedAlchemy commented May 16, 2018

simonjoom commented May 16, 2018

simonjoom commented May 16, 2018 • edited Loading

ScriptedAlchemy commented May 16, 2018

simonjoom commented May 16, 2018

ScriptedAlchemy commented May 27, 2018

This comment has been minimized.

rherwig commented May 28, 2018

ScriptedAlchemy commented May 28, 2018

ScriptedAlchemy commented May 28, 2018

rherwig commented May 31, 2018

rajatpharmeasy commented May 31, 2018

ScriptedAlchemy commented May 31, 2018

ScriptedAlchemy commented May 31, 2018 • edited Loading

ScriptedAlchemy commented Jun 2, 2018

rherwig commented Jun 2, 2018

ScriptedAlchemy commented Jun 4, 2018

GuillaumeCisco commented Feb 5, 2018 •

edited

Loading

GuillaumeCisco commented Feb 5, 2018 •

edited

Loading

GuillaumeCisco commented Feb 5, 2018 •

edited

Loading

davidfurlong commented Mar 5, 2018 •

edited

Loading

simonjoom commented May 16, 2018 •

edited

Loading

ScriptedAlchemy commented May 31, 2018 •

edited

Loading