AngularJS with Webpack - Uglifying your JavaScript

InstructorKent C. Dodds

AngularJS
webpack

Share this video with your friends

Send Tweet

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.

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';