We all know that when we hit the npm run build, the react scripts uses the Webpack and creates a bundle going through all the dependency graph (follow the imports) and creates a bundle.js and places it inside dist/build folder which is used for production. I recently read that even React is a devDependency (?) because once the bundle has been created there’s no need of react (basically no need of node_modules) at production because the final bundle is a mix of js and css files which the browser can understand. Here are my questions.
1) Please let me know if the above statement about React being a devDependency is correct or not?
2) Since we have a lot of dependent node modules when we install a node package. Is Webpack going to bundle all these node modules as well into the final bundle.js? If so, wouldn’t it be a very large bundle? How does this work?
Technically speaking, React is a dev dependency in a bundled app, because you don't need it in production unless you also do server side rendering. Consider a case where you have a frontend app with an express server. You bundle the app using webpack and deploy it as static JS/CSS asset, but you express server no longer needs it as you are not doing SSR. So for deploying the server, you can prune dev dependencies, keep around only what's needed by the server and keep the server smaller.