Getting started with Webpack: ES6, React, SCSS, Sourcemaps
TL;DR: If you are struggling to pick up Webpack, I recently created a simple repo that can help.
Since joining Uber, I've been doing almost exclusively back-end work in Python. Recently, however, I've been spending some of my time outside of work getting caught up on the latest front-end technology.
My big thing with front-end dev work is that it always seems like a huge pain in the ass to set up your build environment. I know there are lots of tools out there to help you with this (eg. react-create-app), but I like knowing what's going on in my application, so I can tweak things easily when the need arrives.
Anyway, I started looking into Webpack, because I heard it was "way better than Grunt/Gulp/[insert other build system here]". I was skeptical, but wanted to give it a try...
It. Is. Awesome. It's a bit of a pain to get started, but it handles CSS compilation, ES6/JSX compilation, linting, sourcemaps, everything like a breeze.
If anyone else occassionally struggles with getting their build-systems up and running, and wants to learn a bit more about Webpack, feel free to check out my front-end-project-starter repo.
I made some effort to provide a useful README, and added comments to my webpack.config.js so others can quickly understand how all the parts fit together. Maybe someone else will also find it useful.
The repo currently supports:
- ES6
- JSX
- Inline SCSS
- Automatic linting
- Sourcemaps (for easy debugging)
Feel free to check it out!