webpack 4 support
GuillaumeCisco opened this issue · 40 comments
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.
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).
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 :)
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.
I've just tested with the last version of extract-text-webpack-plugin and my code works well.
It looks like extracting CSS chunks will be supported in webpack 4 via https://github.com/webpack-contrib/mini-css-extract-plugin
Yup!
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 ?
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.
@faceyspacey any estimated timeline for webpack 4 support for your package extract-css-chunks-webpack-plugin?
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.
Ok thanks @faceyspacey
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.
Also mini-css-extract-plugin does not support HMR yet. Are there any css extractors that support HMR?
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
Opening pull request soon for webpack 4 support
@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
Thanks I’ll touch base with him, either this or moving to mini-css-chunk plug-in
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
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
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!
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...
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
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
@davidfurlong .... okay man... I have something. I literally only pushed up the code. So please dear god, don't take this to production.
Im going to update the readme, or at least start to. Theres a couple tasks ahead and getting this to a mergeable point may require some help from the open source community.
Cleaning up, docs, linting, tests are needed, and beta testers... But I am truly happy to announce that my stacks are all universally on Webpack 4 right now.
First things first, I need to get docs to pull and run a branch for you
How to install. Npm install from A git url, using the webpack-4 branch.
There’s a script on the package that’ll automatically build itself I’d its installed via git. Working on readmes and will pick up tomorrow again
Installed this branch:
"extract-css-chunks-webpack-plugin": "zackljackson/extract-css-chunks-webpack-plugin#webpack-4",
Not sure if it was ready yet. Hit validation errors, looks like as soon as it hit the plugin.
if (!v) throw new Error('no schema with key or ref "' + schemaKeyRef + '"');
^
Error: no schema with key or ref "http://json-schema.org/draft-04/schema#"
at Ajv.validate (/Users/dtonys/webapps/universal-web-boilerplate/node_modules/ajv/lib/ajv.js:95:19)
at Ajv.validateSchema (/Users/dtonys/webapps/universal-web-boilerplate/node_modules/ajv/lib/ajv.js:183:22)
at Ajv._addSchema (/Users/dtonys/webapps/universal-web-boilerplate/node_modules/ajv/lib/ajv.js:317:10)
at Ajv.validate (/Users/dtonys/webapps/universal-web-boilerplate/node_modules/ajv/lib/ajv.js:97:26)
at validate (/Users/dtonys/webapps/universal-web-boilerplate/node_modules/extract-css-chunks-webpack-plugin/schema/validator.js:8:20)
at new ExtractTextPlugin (/Users/dtonys/webapps/universal-web-boilerplate/node_modules/extract-css-chunks-webpack-plugin/index.js:111:3)
at Object.exports.extractCSSChunks (/Users/dtonys/webapps/universal-web-boilerplate/webpack/webpack.parts.js:121:5)
at Object.<anonymous> (/Users/dtonys/webapps/universal-web-boilerplate/webpack/webpack.client.config.js:124:9)
...
@dtonys try bypassing whatever validation you have? I’ve not yet updated the schemes. You can also pull the repo and run the test:manual if you want to see it in action, I’ll look into fixing the schema validation tomorrow
I’m trying to unblock the community quickly, literally as soon as it worked on a few of my systems, I started seeding the branch
Hello community
i just created a Apollo boilerplate using the last branch rudy and some feature with webpack4 want to share i'm looking for developer ready to work with me .
Inside your ave a working solution for webpack4 extract-css-chunks-webpack-plugin
https://github.com/simonjoom/Apollo-RFX-PRISMA-ssr-boilerplate
install easy and running too. npm install && npm run start
inside:
react universal component for layout page with splitting dependencies
style management (scss) (font-awesome and basscss for css)
rudy (redux first router) of course
different webpack plugins cache for fast developpement
using apollo-redux-cache to allow apollo working with rudy .. indeed i still didn't test the time travel..
some code taken from create-react-app and different major boilerplate;
webpack4 features bug resolved after looking through internet
at the end you have a very nice workflow .
your application working with the apollo playground for api graphql .
don't hesitate to ask me and i'm looking for people, i can pay if needed
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...
This is very encouraging! @rherwig
@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
@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 :-)
+1 Need this badly.
Okay guys, I’ll look at making a next tag
@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
Pull request open
I am so gonna integrate this in my template project as soon as it hits master! Tests have been working out great so far :-)
@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.
Please let us know if theres any issues & PRs are always welcome