Skip to content

how do i

benholloway edited this page Mar 31, 2016 · 16 revisions

usage

...limit the build to a certain composition

The default value of the names option will cause all the compositions to be built, and only the root composition to be released. You need to set an explicit value.

You will probably want to set it from an environment variable, so that certain npm scripts can build different compositions.

...stop tests being built by default

The default behaviour is determined by the otherwise() statement.

Simply remove test from otherwise().

...fix a Bower package with a broken main

Refer to bower usage.

Change your vendor.js file where the package is imported. Instead of importing the package wholesale, select specific files:

require('broken-package');

becomes:

// require('broken-package');
require('broken-package/dist/index.js');

extensibility

You should first be aware of the structure and refer as needed to extensibility.

Append an operation to the common definition. This operation should use the methods available on the webpack-configurator instance.

...change a loader

For example, to add post-css to css loader (per their usage example), you would write a webpack.config.js file:

var autoprefixer = require('autoprefixer');
var precss       = require('precss');
...
module.exports = angularity(...)
  .define('common')
    .append(amendCssLoader)
  .include(...)
  .otherwise(...)
  .resolve();
  
function amendCssLoader(configurator, options) {
  return configurator
    .removeLoader('css')
    .loader('css', {
      test  : /\.css$/i,
      loader: ExtractTextPlugin.extract('css?minimize&sourceMap!postcss!resolve-url?sourceMap')
    }).
    .merge({
      postcss: function () {
        return [autoprefixer, precss];
      }
    });
}

Wrapping numerous changes in a hoised function adds clarity.

However since you don't need access to the options so you could technically use the [short form](bower usage, omitting the amendCssLoader function, but also losing some clarity.

...add a plugin

For example, to add webpack-notifier plugin (per their usage example), you would write a webpack.config.js file:

var WebpackNotifierPlugin = require('webpack-notifier');
...
module.exports = angularity(...)
  .define('common')
    .append(addPlugin)
  .include(...)
  .otherwise(...)
  .resolve();
  
function addPlugin(configurator, options) {
  return configurator
    .plugin('notifier', WebpackNotifierPlugin, [{title: 'Webpack'}]);
}

In this case you have a single change that doesn't need access to the options.

Consider using the [short form](bower usage, which omits the addPlugin function:

var WebpackNotifierPlugin = require('webpack-notifier');
...
module.exports = angularity(...)
  .define('common')
    .plugin('notifier', WebpackNotifierPlugin, [{title: 'Webpack'}])
  .include(...)
  .otherwise(...)
  .resolve();
Clone this wiki locally