Webpack howto by Pete Hunt

at github.com

7 up and 3 down, posted by eskimoblood 3713 days ago 10 comments

davidchase 3713 days ago. link parent 2 points ▲ ▼

Not sure i follow bundle CSS per module? split points? can you elaborate and react hot loader seems to be coupled with needing to use react...

Is the css part this: ?? http://webpack.github.io/docs/stylesheets.html 

because you can already do that with browserify so im not sure what Im missing

Replies

andreypopp 3710 days ago. link 1 point ▲ ▼

Can you point to browserify plugins/transformers/guides on how to handle CSS bundles, handling static assets and split points in code? I'm asking because I was searching for those and didn't find. Then switched to Webpack as it provides all of those.

eskimoblood 3709 days ago. link 1 point ▲ ▼

Split points are called partition-bundle: https://github.com/substack/browserify-handbook#partition-bundle

CSS bundles can be created with a specail transformer: https://github.com/davidguttman/cssify

andreypopp 3708 days ago. link 1 point ▲ ▼

Unfortunately `partition-bundle` can only partition by enrty points specified via configuration. Webpack can also do that and more importantly it can do splitting by split points in code: `require.ensire('./page', function(page) { ... })`.

Regarding `cssify`: does it able to extract styles into a separate CSS chunk so I can just include it <head />? Also what if it finds a reference to a font or an image in stylesheet? Webpack can handle all of that (embedding css in js bundle, splitting css into separating chunk, embedding font/images as base64 data URIs or treating them as separate assets and copying into output) and in configurable manner.

I like browserify for its super easy and thoughtful API but in terms of features I really need and use I prefer Webpack.

eskimoblood 3713 days ago. link 1 point ▲ ▼

Yes thats the CSS part, didn't know that there is a similar feature in browserify.

Split points means, that you can have can split your application into different parts that will be loaded when needed, instead of compiling the whole app into one file.

React hot load is indeed bundled to reactJS, its a cool feature where you can run your app, change a react module and only this module will replaced in your running in the browser while the state and all other modules sty the same.

davidchase 3713 days ago. link 1 point ▲ ▼

You can also do that with browserify you can split up your files such as vendor-bundle and app (for all of the user js) or you can go further and split per page, module, etc and server it up via xhr, server, etc

So i guess i still dont see how webpack is worth all of that ;)

eskimoblood 3713 days ago. link 1 point ▲ ▼

Ok, maybe its just me knowing browserify not well enough, but maybe its that there are not enough articles that promote advanced features. Even the docs don't tell about this. The only bit I can find is in one of the last sentences of the handbook (and only cause you mentioned that this feature exists). So we are back to your initial point about the reading tons of docs ;)

Btw. for me the feature of having multiple entry points is essential for a package manager on client side.

davidchase 3713 days ago. link 2 points ▲ ▼

the features of browserify that are "advanced" if you will come in a set of interchangable transforms(such as covert less to css, etc) which can be found here: https://github.com/substack/node-browserify/wiki/list-of-transforms