42

Say the webpack config is as follows 

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

Now the build from webpack is

enter image description here

and the build from react-scripts build ( static contains css, js and media in seperate folders )

enter image description here

Question: Is there any specific advantage of webpack over react-scripts build? ( including but not limited to performance )

NOTE: package.json is edited to achieve this.

magpie
  • 653
  • 1
  • 7
  • 12
  • 5
    react-scripts abstracts complex webpack setup, uses some conventions to address general purpose builds. Using raw webpack will give you most control over your builds, while react-scripts hides most of the complexity (although this has been largely addressed in webpack 4 with zero-config approach). – hazardous Sep 05 '18 at 05:18
  • 1
    well, one would expect build structure for both would be same. is there any performance difference or other factors involved? – magpie Sep 05 '18 at 06:45
  • 1
    Webpack leaves the structure to be controlled by the config, as its a general purpose tool which has applications beyond React. In a new install, it won't even be configured to transpile React, you must do it. So there's no standard output structure for webpack, the zero-config dumps basically everything into the same output folder. R-S follows a different setup which they built around React spa needs, but there shouldn't be performance impact as a result of the structure. – hazardous Sep 05 '18 at 07:20
  • in the long run, create-react-app is just endless headache. I always tripped over it but never missed it in the project. – webduvet May 05 '21 at 12:16

2 Answers2

79

Webpack is a general purpose bundler, with applications beyond React. Before create-react-app, the web was full of examples of setting up a brand new React project which uses webpack as the bundler. It is extremely flexible and can handle things including and beyond what a React application would need. It works for Angular, Vue, NodeJS and even Web Assembly.

But it used to take a while to setup. You will need to understand its working and configure it so that you can transpile your React+ES6 code into plan-vanilla JS. You would need to decide the output structure you like and configure webpack for it. And then also add hot-module-reloading and code-splitting support yourself. During this, you will also need to add other plugins required by Webpack to support all the above :).

This naturally caused some fatigue with folks who were starting with React.

So facebook created cra which internally uses webpack, pre-configured to include all the nice tools to take care of these basics and help you focus on the React part of your code. It hides webpack from you as much as possible, otherwise the build process may break if the configuration is changed by the user.

With that aside, the structural conventions which cra uses should not be having any performance impact over a bare-bones webpack setup. It's just a convention.

Your question should then be, when would I use create-react-app and when would I use Webpack?

As a beginner you might want to stick to cra as you focus on your react app. Eventually there would come a time where what you want to do is not supported by the webpack configuration cra is managing under the hood. A very common example is if you want to write a component library to reuse in other apps. This cannot be done by cra (it's about the whole app :)). You can then switch over to webpack and start learning it.

hazardous
  • 10,627
  • 2
  • 40
  • 52
  • 11
    Another example of Webpack only situation is when you want to build browser specific bundles of your JS, a smaller bundle for newer browsers without transpilation and polyfills, and a fatter bundle for older browsers containing all of those. You will need to eject from cra and do that yourself. In general stick with cra until you can't. The advantage being that pure webpack builds need manual changes as new features get added which you want to use, while cra internally upgrades its scripts to use new relevant features transparently. – hazardous Sep 05 '18 at 07:49
  • Linking my earlier response to a related topic about what happens once you eject :). It has some more details and comparison of cra over a raw setup. https://stackoverflow.com/questions/43129451/configuration-for-create-react-app-after-ejecting-to-build-a-component-library – hazardous Sep 07 '18 at 06:56
24

react-scripts hides all of the webpack configs behind the scenes. The advantage of this is it makes it cleaner and since create-react-app is regularly updated, its easy to stay up to date with React, Webpack, and Babel. The community automatically fixes the issues for you.

In terms of performance, should be the same regardless with react-scripts or with webpack.

Advantages of running only webpack:

  • Full control of your environment

  • Can do custom things like server-side rendering easily (still possible with create-react-app

  • Knowledge of webpack as a skill

Disadvantages of webpack only

  • Full in charge updating and maintenance of webpack (some webpack versions are not backward compatible or future compatible)

  • Can be intimidating and can be a headache if you are trying to learn to react quickly.

If you want to customize create-react-app, here is some info

https://auth0.com/blog/how-to-configure-create-react-app/

Here is server-side rendering with create-react-app

https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff

TLDR: Use create-react-app / react-scripts if you want to go to 0-100 as quick as possible for whatever reason

Use just webpack if you enjoy messing around under the hood

maxadorable
  • 1,290
  • 1
  • 10
  • 24