Webpack — configuring and loading vendor files like bootstrap, font-awesome etc.

Recently, I started building a MEAN stack 2.0 app to catch up with Angular 2. I am new to webpack and I encountered some issues while trying to use bootswatch theme, fontawesome ,jquery etc. I thought I will share some of my solutions with everyone.

Note : I initially followed the steps from the angular.io site for configurating webpack


Problem 1 :

Like the documentation mentioned, I bundled my app files to app.ts and vendor files to vendor.ts. How do i load bootstrap , fontawesome and bootswatch css?


Add the following requires to the vendor.

import ‘jquery’;
import ‘bootstrap/dist/js/bootstrap’;

Problem 2:

The below loader had problem to resolve font-awesome font files due to the versioning. I used url-loader because I think the issue was with the import urls in font-awesome files. This worked but that affected glyph-icons load.

test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'


Simple solution is to ignore the versioning with font-awesome files.

 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)?(\?v=[0–9]\.[0–9]\.[0–9])?$/, 
 loader: ‘file?name=fonts/[name].[hash].[ext]?’

Problem 3

Bootstrap is loaded and so is jQuery; but webpack doesn’t recognize jQuery. it throws error ‘ jQuery is not defined’.

Solution: Added a provide plugin for jQuery to inject implicit globals

 jQuery: ‘jquery’,
 $: ‘jquery’,
 jquery: ‘jquery’

I will post more upgrades and about my adventures with Angular2 regularly. If there is something that I can improve or was wrong, Please do comment and let me know.