Angular, Webpack and ES6 Part I
I am putting together the new tech stack for the company I am currently developing for Spingo. We are an Angular front-end team and feel that works best for our current needs. However, we feel the rest of our stack could use some spring(winter) cleaning and thus are embarking on the what, why and where that is a new stack.
So having tried React and ultimately deciding to stay with Angular, we were left deciding whether to leave Coffeescript and step into ES6. We decided ES6 was the better toolset to go with and left us in a better position for the future. At this point we would need to be able to have a build process that supported compiling of ES6, we also use Sass and wanted to keep with that, in addition we use lots of libraries that may or may not be CommonJS or AMD Modules so we would need to potentially support both module systems.
Our current build process is comprised of Angular, Require, Bower, Coffeescript, Grunt and a plethora of grunt plugins and custom tasks. Between all of this we are left with an overly complicated build process that while it gets the job done it was a little outdated and has room for improvement.
At this point it was time to decide on a task runner and module system. As far as tasks runners go the champions are Grunt and Gulp with Broccoli running way behind, but none the less an option. So Grunt, while well supported and widely used, we had been using it a while and seemed to slow down our build time as the project got bigger and bigger. This, combined with the fact that it’s process by which it runs tasks, didn't resonate with us as easily as Gulp did. This led to us going with Gulp and dropping Grunt for what is hopefully the faster and easier to grok lib.
So now the BIG question was what module system to use? RequireJS has been working “great” and if we were going to move away from that the replacement would need to do everything Require did. It would also need to allow us to push forward with some of the more forward thinking tech stack ideas we have been having. Again with the choices, now it was between Browserify, SystemJS, RequireJS and Webpack. Due to the need to pull in all module types we dropped Require and Browserify since they weren't built for that. SystemJS wasn't mature enough as a lib yet and so we were left with Webpack.
With all decision made it was time to jump in and hash out the new build! We have an Express backend for dev and in production we use Scala so first thing first was to get that Express server running. If your unfamiliar with this process there is a great article by Eric Elliot on Getting started with Node and Express.
After that it was time to get started with Webpack and Gulp. Having worked with Gulp before outside of Webpack I was pleasantly surprised to see a npm module for gulp-webpack and how easy it was to get this started.
Reading up on Webpack I found that Webpack was all about the config file. So begin by creating a webpack.config.js in the root of your project. Here is an example of my config and comment containing the reason for each config property:
With the above config file we are already well on our way to having a basic build process up and running. From here it’s getting Gulp started and if your not familiar with that process then here is a great article on Getting started with Gulp. Assuming yourall setup with gulp and have a good understanding there I will show my gulp build and what is entailed, again complete with comments:
The following is a list of all npm modules necessary to run the build above: 6to5-loader angular css-loader exports-loader gulp gulp-livereload gulp-webpack sass-loader style-loader webpack
Given all of this and having the necessary modules installed this should give you enough to get started with a pretty advanced build process and an awesome tech stack. I will continue this series as I build out this new build process and refining things like auto reload, concat the bundles, updating the build version and of course building for production. Hope this helps and any questions, comments or ideas on how to make this even better please share.
