webpack for Angular Developers

Understanding webpack’s affair with the Angular CLI

First things first, the folks at webpack spell it all in lower case, I will too.

In this story we will explore:

1. The “secret” relationship between Angular CLI and webpack
2. Some webpack basics
3. Using Angular CLI to create an Angular seed application that allows us to configure webpack

Getting Started

I’m assuming you know a little something about npm and the Angular CLI. You don’t need to be an expert, but you should at least have a working knowledge of how to install packages using npm. Also, you should at least be familiar with the Angular QuickStart.

Before we get started make sure you have the Angular CLI installed globally. You can check by typing this at the command line:

ng -v

At the time of this writing the latest version is 1.7.1. If you need to install the Angular CLI you can do this:

npm install -g @angular/cli

Let’s create a new Angular project called: ngcli-webpack

ng new ngcli-webpack

To run your application:

cd ngcli-webpackng serve

Point your browser at: http:\\localhost:4200 to see it working.

NOTE: If you are using Internet Explorer you will need to un-comment the imports in src/polyfills.ts.

Angular CLI and webpack

webpack is powerful. It is incredibly configurable. However, this power and flexibility can make for a rather steep learning curve.

Learning about webpack is one of the major hurdles to getting up and running with modern JavaScript frameworks like React and Angular. The nice folks on the Angular team wanted to make it easier for people to start using Angular.

They did this by embedding webpack in the Angular CLI. Now, as an Angular developer you don’t need to know anything about webpack. The Angular CLI hides all that webpack complexity. However, that simplicity comes at the price of flexibility. By using the Angular CLI you lose the ability to configure and customize webpack.

webpack Basics

According to the webpack web site:

webpack is a static module bundler for modern JavaScript applications

In webpack you configure the following:

• Entry: the module where webpack should start
• Output: where webpack emits the bundles it creates
• Loaders: enable webpack to process more than just JavaScript files
• Plugins: perform a wide range of tasks like minification, for example

You set all these up in the webpack configuration file which is typically named: webpack.config.js

So Where is the webpack.config.js?

“But wait Todd, I just searched my entire Angular project and there is no webpack.config.js. Are you sure Angular CLI still uses webpack?”

OK, you’re right, there is no webpack.config.js in our Angular project. And, some healthy skepticism is a good thing. But, let’s take a quick look and verify that Angular does in fact depend on webpack.

In our project we can find a local copy of the Angular CLI here: node_modules\@angular\cli

In that directory you should see the package.json file for Angular CLI. Open it and take a look at the dependencies and among others you will see webpack, webpack-dev-server, etc. For example:

Also, in node_modules you can see that these webpack based dependencies actually did get installed. For example: node_modules/webpack

So, we see that Angular CLI is, in fact, using webpack but it is only a black box to us. This is great if you aren’t a webpack expert. But, if you have taken the time to level-up your webpack skills, this might be unacceptable to you. Fear not, the Angular CLI has a solution for us.

Accessing webpack Config With ng eject

Once we have used Angular CLI to generate our seed application, we can switch to a native webpack approach using: ng eject

In the root of our application run:

ng eject

This will do the following:

1. Generate a webpack.config.js file in the root of our project based on the current build.
2. Sets the ejected flag to true in .angular-cli.json.
3. Updates the scripts in package.json to run based on webpack rather than Angular CLI.

Running After Eject

You should do an npm install after ejecting:

npm install

Now if we want to see our application running we can’t use ng serve anymore. We need to use:

npm run start

If we look in our package.json we can see that this script actually translates to:

webpack-dev-server --port=4200

So we can still go to http:\\localhost:4200 to see our application running in the Development server.

If we try to use ng serve or ng build or anything ng project specific, we will get an error:

ng buildAn ejected project cannot use the build command anymore.

WARNING: Once you use ng eject there is no un-eject and no easy way to get back to using Angular CLI for things like: ng generate. You would have to do something like creating a new Angular project and copy all of your sources into it.

Summary

With the Angular CLI you now have the ability to easily create a seed application built by the Angular CLI that has the fully configurable webpack.config.js that you always wanted. But remember:

With great power comes great responsibility.- Stan Lee