3 ms·

Setting Up Webpack, Babel and React from Scratch

59 points by stankot 9y ago

stankot 9y 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 9y 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.
  - stankot 9y 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 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.
  - acemarke 9y 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.
    - stankot 9y ago
      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!
      - 9y ago
scorpioxy 9y 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.
- stankot 9y 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 9y 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 9y 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 9y 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 9y 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!

59 points by stankot 9y 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 9y 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.
- stankot 9y 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 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.
- acemarke 9y 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.
  - stankot 9y ago
    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!
    - 9y ago

scorpioxy 9y 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.

stankot 9y 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 9y 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 9y 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 9y 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 9y 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!