• Blog
19 Dec 2016

Getting started with Webpack: ES6, React, SCSS, Sourcemaps

Screenshot of Webpack starter repository

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!

Tag

Greg Trowbridge

High Frequency Trader -> Entrepreneur -> Software Engineer

Share

Twitter Facebook Google+
Back to all post
comments powered by Disqus
Subscribe!
All content copyright Greg Trowbridge © 2023 • All rights reserved.
Proudly published with Ghost