AngularJS with Webpack - Uglifying your JavaScript

Kent C. Dodds

InstructorKent C. Dodds

Share this video with your friends

Angular requires some careful consideration when uglifying your code because of how angular's dependency injection system works. See how easy it is to add this consideration to your webpack configuration so you can minify your Angular JavaScript with Webpack.

illustration for webpack v1 from Kent

Course

webpack v1 from Kent

Robin Ury

Robin Ury

~ 7 years ago

In a modern setup with Babel6 & WP2 the includes conf for the loader should look like:

  config.module = {
    rules: [{
      test: /\.js$/,
      use: [
        'ng-annotate-loader',
        'babel-loader',
      ],
      exclude: /node_modules/,
    }

Additionally, if using ES6, one must annotate their controller functions– however, this as simple as inserting a single string statement at the top of the function (including class constructors and ui-router resolves) : 'ngInject';