configuration

A pro-forma configuration was provided in the project setup. We will now discuss its general form.

var angularity = require('webpack-angularity-solution');

module.exports = angularity(...options|factoryFn)
  .include([modes])
  .otherwise([defaultModes])
  .resolve();

Invocation

When webpack-angularity-solution is invoked you have the oportunity to:

• set options by any number of object hashes

  Refer to the options reference for a full list of options.

• override the webpack-configurator factory function

  This feature is powerfuly but rarely used. It is discussed in extensibility.

Particularly important to consider are the following options:

• port

  Each project should define a different port to avoid conflicts if projects are open simultaneously.

  The convention is a 5-digit integer.

• globals

  Note that there are no globals in applications bundled by Webpack. If your code relies on globals such as jQuery, you will have to configure the globals option.

  Better practice may be to solve the problem at its source using module Shimming.

For example:

/* global process:true */

var angularity = require('webpack-angularity-solution');

const PORT    = 55555,
      GLOBALS = {
        $              : 'jquery',
        jQuery         : 'jquery',
        'window.jQuery': 'jquery'
      };

module.exports = angularity({globals: GLOBALS, port: PORT}, process.env)
...

Compile Modes

Concept

The webpack-angularity-solution is based on webpack-multi-configurator. As such it has a number of defined builds that we will call modes.

The modes are all named by pure alphanumeric strings. They include:

• app

  Builds compositions into /app-build directory.

• release

  Builds compositions into /app-release directory. Externalise chunk manifiest json and inline into index.html.

• test

  Generates a /app/test.js test suite composed of all .spec.js files. Builds unminfied test suite into /app-test directory.

Any or all of these modes may be run symultanously.

Include

When the webpack.config.js is run, you have a choice which mode(s) you wish to include in the compile.

The include() method will accept a string (or Array.<string>) where each string may be one or more modes, delimited by any non-alphanumeric string.

For example, these are all legal calls:

• .include('app') includes modes app.
• .include('app+test') includes modes app, test.
• .include('app&test_release') includes modes app, test, release.
• .include(['app', 'test']) includes modes app, test.
• .include(['app+test', 'release']) includes modes app, test, release.

Often the value for include() will be passed from an environment variable, such as:

/* global process:true */
...
.include(process.env.MODE)

Otherwise

In the above case it is important to have a default value, where process.env.MODE is not defined.

The otherwise() method will similarly accept a string (or Array.<string>) where each string may be one or more modes, delimited by any non-alphanumeric string.

Just the same as above, these are all legal calls:

• .otherwise('app') defaults to modes app.
• .otherwise('app+test') defaults to modes app, test.
• .otherwise('app&test_release') defaults to modes app, test, release.
• .otherwise(['app', 'test']) defaults to modes app, test.
• .otherwise(['app+test', 'release']) defaults to modes app, test, release.

Putting it all together we can run modes app and test where process.env.MODE is not defined.

/* global process:true */
...
.include(process.env.MODE)
.otherwise('app+test')

Exclude

Less important but worth noting is the exclude() method.

Its signature is similar to include() and otherwise(). It is the dual of include() in that it will remove elements that have been included.

For example, to always remove mode test, even if specified in process.env.MODE:

/* global process:true */
...
.include(process.env.MODE)
.exclude('test')