First things first, the folks at webpack spell it all in lower case, I will too.
In this story we will explore:
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:
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:
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.
webpack is powerful. It is incredibly configurable. However, this power and flexibility can make for a rather steep learning curve.
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.
According to the webpack web site:
In webpack you configure the following:
You set all these up in the webpack configuration file which is typically named: 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:
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:
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.
Once we have used Angular CLI to generate our seed application, we can switch to a native webpack approach using:
In the root of our application run:
This will do the following:
ejectedflag to true in .angular-cli.json.
You should do an npm install after ejecting:
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:
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:
An 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.
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