Understanding webpack’s affair with the Angular CLI First things first, the folks at spell it all in lower case, I will too. webpack In this story we will explore: The “secret” relationship between and Angular CLI webpack Some basics webpack Using to create an Angular seed application that allows us to configure Angular CLI webpack Getting Started I’m assuming you know a little something about and the . You don’t need to be an expert, but you should at least have a working knowledge of . Also, you should at least be familiar with the . npm Angular CLI how to install packages using npm 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 you can do this: Angular CLI 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: to see it working. http:\\localhost:4200 : If you are using Internet Explorer you will need to un-comment the imports in . NOTE src/polyfills.ts Angular CLI and webpack is powerful. It is . However, this power and flexibility can make for a rather steep learning curve. webpack incredibly configurable Learning about is one of the major hurdles to getting up and running with modern JavaScript frameworks like and . The nice folks on the Angular team wanted to make it easier for people to start using Angular. webpack React Angular They did this by embedding in the . 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 Angular CLI webpack Basics According to the : webpack web site is a for modern JavaScript applications webpack static module bundler In webpack you configure the following: : the module where webpack should start Entry : where webpack emits the it creates Output bundles : enable webpack to process more than just JavaScript files Loaders : perform a wide range of tasks like minification, for example Plugins 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 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. webpack.config.js 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 file for Angular CLI. Open it and take a look at the dependencies and among others you will see , , etc. For example: package.json webpack webpack-dev-server 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 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. webpack 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: Generate a webpack.config.js file in the root of our project based on the current build. Sets the flag to true in . ejected .angular-cli.json 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 anymore. We need to use: ng serve 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 to see our application running in the Development server. http:\\localhost:4200 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: . You would have to do something like creating a new Angular project and copy all of your sources into it. ng generate 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
![16 JavaScript Protips [2020 Edition]](https://hackernoon.imgix.net/drafts/q1n3yqk.png?auto=format&fit=max&w=3840)
