
Setting Up Webpack, Babel and React from Scratch - stankot
https://stanko.github.io/webpack-babel-react-revisited/
======
sriram_iyengar
Being a newbie to React I’m always told by my experienced React peers that
‘creat react app’ is the right way to go about building react apps. Can you
explain why we should build Webpack from scratch ?

~~~
zackify
I setup webpack myself on larger apps. There’s a lot of configuration options
that you can’t change in CRA without ejecting. Changing how modules are
loaded, changing options for css loading or svgs, for example. I prefer to
start my own instead of ejecting, because I don’t need everything it comes
with and prefer to know every module inside my app, and not include extra
things CRA comes with. Adding new loaders, changing Babel presets, there’s so
much you can’t change and these things matter in large apps.

------
stankot
Author here, feedback is more than welcome. I tried to be very detailed and
explain how the whole thing works. There will be more posts about
webpack/react in near future.

~~~
temeritatis
Awesome stuff! I don't understand why this post isn't more popular around
here?

This is exactly what i need. For too long i've felt that there is too much
magic happening in the js and front end tooling world. More often than not,
tutorials and guides just brush the basics aside and expect you to be fine
with cloning the newest github biolerplate with x and y features and get on
with it. That is usually fine until you hit a bug, or some non standard
behavior because of the tooling setup. I think if you really want to learn for
example react you owe it to yourself to learn the basics or you'll regret it
later. And besides, most of these boilerplates usually bring considerable
feature blot with it IMHO.

I've grown too comfortable relying on prebuilt boilerplates. Time to get my
hands dirty. If just for the learning experince.

~~~
acemarke
Webpack and Babel are very important tools, and I'd agree that it's worth
knowing how they work and how to configure them... _eventually_. However, I
disagree that those are "the basics". You shouldn't have to be required to set
up Webpack and Babel as a prerequisite for being able to play around with or
learn React. (That may not be exactly what you were suggesting, but it's a
somewhat common sentiment.)

It's worth noting that Create-React-App is the recommended tool for most
people to use when starting a new React project. Also, CRA isn't a
"boilerplate". It's a prepackaged build system that can be upgraded, and acts
as an abstraction layer over Webpack and Babel. It doesn't come with dozens of
app-level dependencies already installed and custom-configured, like most
boilerplates do. It comes with sensible default settings out of the box, has a
linting config that tries to detect common errors, and includes a lot of
really nice bits of DX aimed at newer users.

Overall, CRA serves three primary purposes: it allows React learners to set up
an environment without having to learn Webpack and Babel first; it allows
experienced React devs to spin up a project without having to do all the
configuration work (or copy and paste it from somewhere); and it also provides
a common starting point for instructions and tutorials. For example, my blog
post on using the Cesium.js 3D globe library with Webpack and React was able
to start by just saying "Create a CRA project, eject, and modify these two
config values".

So, my advice to most React developers would be to use CRA as the default tool
for starting a new React app, unless you know ahead of time that you will need
capabilities that CRA doesn't easily support, or you're very comfortable with
configuring Webpack and Babel already.

All that said, if you _do_ want to know how to set up Webpack and Babel, this
is a good article, and I'll be adding it to my React/Redux links list as a
useful resource.

~~~
stankot
Of course, Create React App is the best place to start, and I totally agree
with your points. I never said learning these tools are the basics. But if you
need to setup a bigger project CRA doesn't cut it by default.

For example, it is missing HMR and CSS preprocessing (or postporcessing) which
are must have on a larger scale. Again, you can eject and start from there,
but in that case it will be much easier if you understand these tools.

Thank you for the constructive feedback!

~~~
acemarke
I'll nitpick a bit: CRA _does_ actually support "plain HMR", just not use of
React-Hot-Loader. I wrote a post that clarifies the difference between the
two: [http://blog.isquaredsoftware.com/2017/08/blogged-answers-
web...](http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-
vs-rhl/) .

------
scorpioxy
I've yet to digest this article but it comes at the right time as I try to
optimize my employer's webpack/react process.

Curious, do you have any thoughts on rollup? What I gathered was that with the
more recent webpack versions, rollup doesn't offer any advantage over webpack
which is a beast but is a lot more mature.

~~~
stankot
Both rollup and webpack are solving the same problem. I just played with
rollup a little, so I don't have production level experience with it. However,
I did a lot of reading and it seems that general opinion can be summed to:

Use webpack for apps, and Rollup for libraries

As I already had quite a lot of experience with webpack, I've decided to stick
to it. Friend of mine likes to say - "the best technology is the one you know
best".

But I would be interested to hear experiences from the people using rollup on
their projects.

------
TACIXAT
I totally just set these three up the other night at the suggestion of React's
documentation. It was tough getting everything to line up from their separate
documentation. Great work on putting a guide together for all three!

