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

https://angular.io/docs/ts/latest/guide/webpack.html#!#entries-outputs

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?

Solution:

Add the following requires to the vendor.

import ‘jquery’;
import ‘bootstrap/dist/js/bootstrap’;
require(‘!!style!css!font-awesome/css/font-awesome.min.css’);
require(‘!!style!css!bootstrap/dist/css/bootstrap.css’);
require(‘!!style!css!bootswatch/paper/bootstrap.min.css’);

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]'
},

Solution:

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

webpack.ProvidePlugin({
 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.