How does a Webpack isomorphic/universal plugin work?

Question

I've found 2 tools for solving the issue with module loaders on server side: webpack-isomorphic-tools and universal-webpack. Can someone please explain me the crucial steps how these things work? How does it capture/extract the imported / required modules?

Answer 1

I'm the author of these 3 modules.

webpack-isomorphic-tools hooks into Node.js's require() function with the help of require-hacker and intercepts require() calls for all assets with configured extensions returning their Webpack-compiled form (taken from webpack-assets.json generated by webpack-isomorphic-tools/plugin during Webpack build).

universal-webpack doesn't hook into require() function - it's just a helper for transforming client-side Webpack configuration to a server-side Webpack configuration. It doesn't run on the server-side or something. It's just a Webpack configuration generator - turned out that Webpack has a target: "node" parameter which makes it output code that runs on Node.js without any issues.

I wrote webpack-isomorphic-tools before universal-webpack, so universal-webpack is the recommended tool. However many people still use webpack-isomorphic-tools (including me) and find it somewhat less complicated.