1. you don't need them all, but for using the latest ES future spec and ideas and hot reloading they are needed. es2015 : to use ES6, stage-0: all babel plugins

1. you don't need them all, but for using the latest ES future spec and ideas and hot reloading they are needed. es2015 : to use ES6, stage-0: all babel plugins: async/await, 22, trailing comma a(1,2,), spread {1, ...a}, and more : http://babeljs.io/docs/plugins/preset-stage-0/ http://babeljs.io/docs/plugins/preset-stage-0/ the react plugin is to transform the JSX syntax <component/>, and react-hmre is a preset for hot reloading. 2. we need webpack to bundle the js, jsx, css, images if they are small or use them as asset if they are big. With Gulp you have to re-create painfully what webpack already offer. Webpack is declarative configuration, gulp is complex plumbing. 3. Webpack is powerful, but i am pretty sure the average webpack config file is way less the size of gulps files. 4. PostCSS is more powerful and can strongly link your postcss and component class without having to invent a complex and tedious naming style. 5. PostCSS make terser and safer css. 6. this is exactly the use of plugins for webpack. 7. because you want to have a dev and production mode, in dev mode react test lot of thing like properties type and invariants, you don't want that in production mode because it slow things. Also if you want to make different variants of your project, webpack can at compile time use those env variables to remove some functionalities just put an if (env.CLIENT === "bigcorp") {...} and webpack with the help of uglify will remove or add the code in the then part. 8. each lib has a reason and is orthogonal to one another. 9. to load an asset json file as a parsed JS object with the syntax like you would import a module. very useful. 10.-> 13. webpack is used for all assets and to find the tests and to present them to mocha et al. lot of them a dev dependencies it means you can deactivate them and still ship your product.