Tag Archives: webpack

setup Font Awesome in Angular 2 with webpack

Font Awesome in Angular 2 with webpack Setup Guide

This is a guide for setting up Font Awesome in Angular 2 with webpack.

Although this guide is written at the time of Angular 2, it should also work for Angular 4 and future versions of Angular, according to the official Angular branding guideline.

Font Awesome is a hugely popular package for icons. Back in the days, you could just include css and font files in index.html. However, with so many new technologies, it has become increasing hard to integrate 3rd party library into our web app project.

Of course we can still use a CDN to serve static resources, but that’s not helpful when we need to test locally. It also adds external dependency which we have no control over. Hence, we need an idiomatic way to use Font Awesome in Angular 2 with webpack. Continue reading →

modular d3 app with commonJS and webpack

Modular d3 app with commonJS and webpack

Creating modular d3 app with commonJS and webpack

In my previous post, I wrote about how to break up the d3 visualization app into different modules. It turns out that there is a better way to write modular d3 app, using commonJS and webpack.

Update on 6/May/2016:(webpack 1, deprecated) For a more idiomatic approach using webpack.optimize.CommonsChunkPlugin, visit webpack’s documentation on code splitting. The approach described in this post has the limitation of not being able to produce separate output files for app and vendor libraries, which is addressed by the idiomatic approach.

Update on 23/March/2017: (webpack 2, recommended) For a more idiomatic approach using CommonsChunkPlugin, visit webpack 2’s guide on code splitting. The approach described in this post has the limitation of not being able to produce separate output files for app and vendor libraries, which is addressed by the idiomatic approach.

Update on 12/Sep/2016: This post is gaining lots of popularity since d3.js v4 is released under npm. The approach described below should still work in theory although I have not tested it. Let me know if it doesn’t.

Continue reading →