Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Angular with Webpack - Introduction

    Kent C. DoddsKent C. Dodds

    Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

    angularjsAngularJS
    webpackwebpack
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 The first thing that we're going to want to do, obviously, is install Webpack. We'll also install webpack-dev-server. We'll install these as dev dependencies, so we'll add that -D. Then we'll create a webpack.config.js with a module.exports, our config object.

    00:22 We'll set our context to be the context of our application. This will be...Whoops. Need to spell that correctly. dirname plus /app. The context of our app is right there in the app directory. Our entry file is going to be index.js. That will be in relation to our context.

    00:45 We'll put our index.js there, and then we'll have our output, where the path is the same -- dirname plus /app. The filename will be bundle.js. That's it for our webpack.config. We're going to create our index.js here with an alert of "Hello."

    01:11 We'll run Webpack. This will create the bundle for us. In our index.html, we'll add that bundle as a script, where the src is bundle. We save. If we refresh, we get the "Hello" there. We're going to actually delete this bundle, the file, just to illustrate something here.

    01:38 Instead of using Webpack, we want to have a server that will automatically rebuild every single time. We can accomplish this same thing with Webpack watch, but we're going to use webpack-dev-server instead.

    01:52 I recommend in your package.json, you'll add a script called "start," where it points to the webpack-dev-server in your local known modules, with a content base pointing to your context or where your app will be served up.

    02:10 With that configuration, if I say "npm start," it will run that script for me. Now it's serving up my app on port 8080. If I switch this to localhost:8080, I get the "Hello." Now we're running using webpack-dev-server.

    02:28 Again, you'll notice that the bundle.js is not inside the app directory, but it's still running. That is because webpack-dev-server is actually serving that file in memory. When a request comes for that bundle.js, it will send that file to us instead.

    02:47 Now let's make this an Angular app. The first thing we'll do is we'll say, "ng-app="app." Inside of our index.js, we are going to require dependencies a little bit different than you may be used to. The first thing we'll do is we'll npm install angular, and in here, we'll say, "var angular = require('angular')." That's common JS syntax that Webpack enables us to do.

    03:16 We'll create our app module with no dependencies. From here, everything should work if I assign this to ngModule and then say "console.log(ngModule)." Save, refresh. In here, we have our object, which is our module. We also have the Angular logo up there. This is an Angular app.

    03:44 Everything is up and running with Webpack using this configuration here, where the context is pointing to the app directory where our app is living. We have an entry of our index.js file, and then our output is pointing to the same directory and a bundle.js file. In here, in our index.html, we're referencing that bundle.js file.

    04:15 That is how you get started with Angular and Webpack. More to come.

    Discuss

    Discuss