Skip to content

how do i

benholloway edited this page Jun 22, 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 hoisted function adds clarity.

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

Since webpack-configurator tries to merge definitions you should always remove a loader that is being redefined (see below).

...remove a loader

For example, to remove the jshint-loader pre-loader:

module.exports = angularity(...)
  .define('common')
    .append(removeLoader)
  .include(...)
  .otherwise(...)
  .resolve();
  
function removeLoader(configurator, options) {
  return configurator
    .removePreLoader('linting');
}

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

Consider using the short form, which omits the removeLoader function:

var WebpackNotifierPlugin = require('webpack-notifier');
...
module.exports = angularity(...)
  .define('app')
    .removePreLoader('linting')
  .include(...)
  .otherwise(...)
  .resolve();

...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, which omits the addPlugin function:

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

Since webpack-configurator tries to merge definitions you should always remove a plugin that is being redefined (see below).

...remove a plugin

For example, to remove the browser-sync plugin:

module.exports = angularity(...)
  .define('app')
    .append(removePlugin)
  .include(...)
  .otherwise(...)
  .resolve();
  
function removePlugin(configurator, options) {
  return configurator
    .removePlugin('browser-sync');
}

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

Consider using the short form, which omits the removePlugin function:

var WebpackNotifierPlugin = require('webpack-notifier');
...
module.exports = angularity(...)
  .define('app')
    .removePlugin('browser-sync')
  .include(...)
  .otherwise(...)
  .resolve();