In BlogPost, Fair Job Offer Project, Javascript

Getting Angular and Webpack Working Together in the Fair Offer Project

As part of scoping the fair offer project, I decided to use angular and webpack.


To recap, webpack is a module bundler that generates static assets and splits the application into multiple chunks to load those chunks on demand.

Experiencing Frustration and a Solution

At first, I found it a bit hard to get working. In fact, I remember plugging away at it for an hour or two (I’m writing this months later, so I can’t recall exactly) one evening after work and remember what a pain it was to get it working with bootstrap.

Fortunately, I came across this post by the ody brothers. I still ran into a couple of issues, but it helped me get going in the right direction.

Here are the steps I followed to get the webpack module compiling.

Step 1 – Add to bower.json and package.json

In bower.json I added the following:

In package.json I added these files:

Step 2 – Add to app.js and webpack.config.js

In app.js, I added the following line:

In webpack.config.js, I added the following…

  • Add file loader to module.exports
  • Add to resolve

Step 3 – Resolve the jQuery error

Of course when I tried to run gulp serve, I got a ‘jQuery is not defined’ type issue.

Oops, looks like alert.js in bootstrap can’t work without loading jQuery.

I trolled through this post, this one, and finally this one to fix the error.

Step 4 – Get the CSS Working

The next issue was how to get bootstrap css to show up. To do that I had to update 2 dependencies in my package.json file, url_loader and file_loader. Then after a bit of Googling, this is the final webpack.config.js file I came up with.

You can see I played around with the path to bootstrap via the bootStrap path variable before commenting it out.


Hopefully this post gave you a better idea on how to troubleshoot your issues with the baseline repository I used to get going with Webpack, Angular, and Gulp.

Recent Posts