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.
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.
Simple solution is to ignore the versioning with font-awesome files.
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
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.