Webpack 4 support about webpack-flush-chunks HOT 20 CLOSED

@faceyspacey i filed webpack/webpack#7093. If and once merged it should be pretty easy to get all relevant chunks with webpack 4 and split/chunks

from webpack-flush-chunks.

The easiest way to achieve the same behavior as the previous CommonsChunks - without additional splitting is to use:

optimization: {
  runtimeChunk: {
    name: 'bootstrap',
  },
  splitChunks: {
    chunks: 'initial', // <-- The key to this
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
      }
    },
  }
}

That worked for me at least. It would not create any additional chunks with ~ in their name etc.

from webpack-flush-chunks.

excellent work @zackljackson !!!!!

from webpack-flush-chunks.

We have had it for almost 8 months now :). It would appear React influencers don’t build apps anymore ;)

Quickest solution: Use webpack 3.

I likely won’t find time to revisit universal-related packages until the official suspense React async api is released and finalized, as it will mean significant changes and that’s the most efficient path forward.

That said it’s likely super easy—if u analyze the code here u will see that for flushing chunk names the shortest code path is used. This started out doing all this work based on module ids before webpack let you name your chunks. A lot of code can be deleted if you don’t need that path. In the next major version we probably will drop that. Check the source real quick and you may be surprised by how little it’s doing.

Also, all the info is easily accessible in stats.assetsByChunkName, and I assume it’s something similar still.

from webpack-flush-chunks.

Oh, the alternative to the original question is forget the bootstrap chunk. Instead in main.js assign a function called render or something similar to window.render and paste a script after all your chunks that simply calls it.

I probably won’t promote the bootstrap approach in any future major releases anyway as it causes too much confusion. The goal is simply to insure u don’t perform your first render until you have all the chunks.

from webpack-flush-chunks.

Thanks @slavab89

It's now trivial with webpack 4.7.0

const chunkNames = flushChunkNames();
const assets = {
    css: [],
    js: [],
};

chunkNames.forEach(chunkName => {
    const chunkAssets = clientBundleStats.namedChunkGroups[chunkName].assets;
    const js = chunkAssets.filter(filename => /.js$/.test(filename));
    const css = chunkAssets.filter(filename => /.css$/.test(filename));

    assets.js = assets.js.concat(js);
    assets.css = assets.css.concat(css);
});

console.log(assets); // { css: [ '1.css' ], js: [ 'chunk-routes/home.js' ] }

from webpack-flush-chunks.

I just came across this issue after submitting this SO question.

If we can get this figured out, we'll have hit the motherload- uber-efficient Webpack 4 chunks via SplitChunksPlugin, plus true SSR for CSS + JS.

This is the magic we've been waiting for. Crazy more people aren't talking about/focused on this!

from webpack-flush-chunks.

Every codebase is an idea...

And the documentation is usually a snapshot of that idea in time, but it could be more. It could capture the evolution of the idea and be a living document that builds a community around it by way of education and insight.

@faceyspacey thanks for the tips mate. Could we maybe work on moving these into README documentation as follows:

## A note on Webpack 4
I likely won’t find time to revisit universal-related packages until 
the official suspense React async api is released and finalized, as 
it will mean significant changes and that’s the most efficient path forward. 
[...]

*Here's an example of how to work with Webpack 4....*
```javascript

// Todo:

from webpack-flush-chunks.

@ermik I like your approach but generally I find making a PR with the updated docs works better and takes no more time than suggesting them in an issue given how busy open source maintainers are

from webpack-flush-chunks.

@davidfurlong I wouldn't know where to start, there would be a PR coming your way otherwise...

from webpack-flush-chunks.

FWIW, I got.js chunks working in Webpack 4 with react-loadable:

jamiebuilds/react-loadable#111

Thanks in large part to @faceyspacey's genius approach to combining a Webpack build via the Node API instead of the CLI inside a server, and only compiling the server middleware (Koa, in my case) and not the whole lot, a la https://github.com/faceyspacey/universal-demo/blob/master/server/index.js#L40-L45

from webpack-flush-chunks.

Yea but we don’t like React Loadable around these parts. Please use Universal instead.

The original issue can be solved like I said by assigning your render function to window.render. So I’m not even sure what the problem is with webpack 4.

from webpack-flush-chunks.

Ps all my work started out as a PR to Loadable. Anyway please come with a solution for Universal or ur banished :) jk

from webpack-flush-chunks.

[edited my original comment, since you edited yours and it no longer applies]

FWIW, I used react-loadable solely because I couldn't get the universal babel plugin to fire, whereas the other one seemed to work first time. It was probably just a config issue, but I went with what seemed to be working.

Now that I've had a little more direct experience with the shape of Webpack stats, I'll take a closer look at the Universal family of packages to see what I was doing wrong.

Thanks for your help.

from webpack-flush-chunks.

That PR has been merged (although not yet released). Great job @slavab89

from webpack-flush-chunks.

I believe the PR landed in https://github.com/webpack/webpack/releases/tag/v4.7.0

from webpack-flush-chunks.

Something similar yeah. You would have to use namedChunkGroups instead of assetsByChunkName as it was not changed. But other than that it should be the same 😄
I am not sure if we can do a PR here for that as it requires webpack 4.7 so people with versions previous to that wont be able to use it.

from webpack-flush-chunks.

@slavab89 Much appreciated!

Ill be PR code updates and ReadMe's for the community to follow. Overall its pretty easy and the main think is really just swapping out CSS loaders & updating the universal family.

from webpack-flush-chunks.

Been fixed

faceyspacey/extract-css-chunks-webpack-plugin#60 (comment)

from webpack-flush-chunks.

Aggressive code splitting in Webpack 4 now supported. You should be able to use more complex optimization and chunking techniques.
#59

Now available via @next tag on NPM

from webpack-flush-chunks.