After Grunt config files started to grow exponentially and scared the shit out of us, Gulp and its best friend Browserify came into town. They were shiny, conceptually simple and powerful. They were so simple that they needed long list of packages to download and you needed to wire them up which most of the time it was ending with frustration.
Just setting up a quick setup to start working on your project had become a real pain in the ass.
On one of those days while the pain was still, I’ve started to search for a new and more powerful tool. Something that will do the same build process but will improve my current workflow.
Before optimising your app, you should optimise your workflow. So you’ll have more time to spend working on your app.
— Dan Abramov (creator of Redux)
Webpack
After a quick search, I remembered a friend. It’s called Webpack. It does what I exactly needed for. It attacks the build problem and has enough power out of the box that you typically don’t need Grunt, Gulp or Browserify at all.
With Webpack you can declare a simple config file to define your build process. If you are going to remind me about Grunt config file then I would say configuration isn’t necessarily a bad thing if it’s done right!
So…
How simple is it to build a React SPA which; coded in ES6, auto-compiled and auto-refreshed on file changes?
Well, it takes only 25 lines. Here is a gist from my latest project:
ps. Webpack 1.x.x doesn’t natively support or understand ES6 modules but it’s a coming feature in Webpack 2.0.0 — It’s cool, isn’t it? :)
What Webpack does is that assumes you need to move files from a source directory to a destination directory. It assumes you want to work with JavaScript.
You may ask; What happens to my image and CSS files ?
Well, you can import these assets directly into your component.
//import your CSS (or less, etc) for the component
import style from './style.css'//import your images for the component
import img from './img.png'
Webpack is smart enough to dynamically inline your CSS and images when it makes sense. It will consider the size of the file. If it’s small, it will inline the stylesheet and If it’s long, it’ll minify the file.
This works for images as well using the url-loader plugin. If the image is small enough, it will encode the image in base64!
And this is not even the best part;
The best part is Code Splitting
Webpack can intelligently split your resources into bundles or you can define multiple entrypoints so that user will only download the page that he/she has needed.
This feature really counts If you have a massive SPA. Your users will download only the files they need for a given page instead of a single monolithic massive JavaScript file.
Want to learn more? Take a look at the Pete Hunt’s webpack-howto before you dig into webpack-docs.
And remember;
Work smarter not harder!
Thanks for reading.
You can follow me on twitter @frontyend.
