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.

These arguments may be made in any order.

At minimum you will need the following customisations on every project.

• 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

Worth mentioning but less often used is the exclude() method.

It is the dual of include() in that while its signature is same, it will remove elements that have been included.

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

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