AngularJS with Webpack - ES6 with BabelJS

Great videos !

Would be great if you could demonstrate how to use Webpack to load dependencies installed with bower and how it is able to create sourcemaps.

See this lesson: https://egghead.io/lessons/javascript-webpack-loaders-source-maps-and-es6 And look at adding bower_components to resolve.modulesDirectories http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

How would you go about getting angular to work with webpacks Hot Module Replacement capabilities? Would be great to see a vid on that. Cheers.

Wow, just noticed this. Sorry about that. I don't think that there'd be any way to actually do this just because the way that angular bootstraps your application. There would be very few functions that you could reasonably hot reload. But if you find a way to do this. I'd totally love to see it.

Hey guys, just a heads up:

• when installing babel, you also need to install "babel-core" together with the "babel-loader".

I'm using babel 6 and am having trouble using arrow functions. i read breifly about having to install babel-preset-es2015 but when i --save-dev, add it to the webpack.config query { presets: ['es2015'] }, i get a JS error saying the 'object is not a function'

Hmmm... I'll expect that you're not calling what you think you are. I recommend putting a breakpoint in there and figuring out what you're trying to call. It may be related to this

To have it working you must update webpack.config.js

{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'],"plugins": ["add-module-exports"] }},

and in package.json "babel": "^6.3.13", "babel-core": "^6.3.21","babel-loader": "^6.2.0","babel-plugin-add-module-exports": "^0.1.2"

I can confirm that this works. As an alternative, I think that you can use the es6 import syntax as such

const angular = require('angular');
const ngModule = angular.module('app', []);

import directives from './directives';
directives(ngModule);

you don't need "babel" dependency when you've got "babel-loader" and "babel-core" ;)

I also had to npm install -D babel-preset-2015

Yeah, Babel changed significantly since this series was recorded. Please see this lesson with instructions on how to upgrade.