You might notice after requiring Angular JS into your project that the time it takes from a save to a finished rebundle of your application takes more time. In development you ideally want from 200-800 ms rebundle speed, depending on what part of the application you are working on.

Running minified file in development

Instead of making Webpack go through Angular JS and all its dependencies, you can override the behavior in development.

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(__dirname, '../node_modules');
var pathToAngular = path.resolve(nodeModules, 'angular/angular.min.js');

var config = {
  entry: path.resolve(__dirname, '../app/main.js'),
  resolve: {
    alias: {
      'angular': pathToAngular
    }
  },
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [pathToAngular]
  }
};

module.exports = config;

We do two things in this configuration:

  1. Whenever "angular" is required in the code it will fetch the minified Angular JS file instead of going to node_modules

  2. Whenever Webpack tries to parse the minified file, we stop it, as it is not necessary

Take a look at Optimizing development for more information on this.