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.
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…