Setting Up Webpack, Babel and React from Scratch

https://stanko.github.io/webpack-babel-react-revisited/

by stankot • 9 years ago

59 12 9 years ago

stanko.github.io

stankot4• 9 years ago

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• 9 years ago

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.

stankot4• 9 years ago

Thank you!

I had the same feeling with boilerplates, so I tried my best to learn the tools properly. Digging through documentation took me a lot of time, so I tried my best to summarize it in a simpler way. It should get people up to speed and give them a solid ground for learning more.

Let me know if there is room for improvement of the tutorial. I plan to post more posts in the same series soon.

Bloat is hard to avoid on boilerplates (I wrote one that is quite popular so I know how it goes https://github.com/workco/marvin). If you want to make useful boilerplate, it gets opinionated really fast. I hope that is something we'll solve with the next version of Marvin.

Btw I posted it yesterday, and it already gained a lot of traction (based on the analytics). Not sure why it didn't get more attention on HN though.

acemarke2• 9 years ago

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.

scorpioxy• 9 years ago

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.

stankot4• 9 years ago

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.

sriram_iyengar• 9 years ago

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• 9 years ago

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.

aeriklawson• 9 years ago

I think if you're just trying to learn React and want to get started with the fewest steps possible, yes.

However, I think knowing (JS) build configurations is highly desirable and you're way better off understanding how to set up Webpack and understand what its doing.

TACIXAT• 9 years ago

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!

Setting Up Webpack, Babel and React from Scratch

Related Stories