Make the README a bit shinier

README.md

@@ -1,21 +1,36 @@
-<div align="center"><h1>Speed Measure Plugin</h1></div>
+<div align="center">
+ <img width="120" height="120" src="logo.svg">
+ <h1>
+ Speed Measure Plugin
+ <div><em><sup><sub>(for webpack)</sub></sup></em></div>
+ </h1>
+</div>
 <br>
 
+The first step to optimising your webpack build speed, is to know where to focus your attention.
+
 This plugin measures your webpack build speed, giving an output like this:
 
 ![Preview of Speed Measure Plugin's output](preview.png)
 
-# Getting Started
+## Install
+
+```bash
+npm install --save speed-measure-webpack-plugin
+```
+
+or
 
-`npm install --save speed-measure-webpack-plugin`
+```bash
+yarn add speed-measure-webpack-plugin
+```
+
+## Usage
 
 Change your webpack config from
 
 ```javascript
-{
- entry: {/*...*/},
- output: {/*...*/},
- module: {/*...*/},
+const webpackConfig = {
  plugins: [
  new MyPlugin(),
  new MyOtherPlugin()
@@ -28,84 +43,74 @@ to
 ```javascript
 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
-{
- entry: {/*...*/},
- output: {/*...*/},
- module: {/*...*/},
+const webpackConfig = {
  plugins: SpeedMeasurePlugin.wrapPlugins({
  MyPlugin: new MyPlugin(),
  MyOtherPlugin: new MyOtherPlugin()
  })
 }
 ```
 
-Or you can also specify config:
+If you're using `webpack-merge`, then you can do:
 
 ```javascript
-const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
+const smp = new SpeedMeasurePlugin();
 
-{
- entry: {/*...*/},
- output: {/*...*/},
- module: {/*...*/},
- plugins: SpeedMeasurePlugin.wrapPlugins({
- MyPlugin: new MyPlugin(),
+const baseConfig = {
+ plugins: smp.wrapPlugins({
+ MyPlugin: new MyPlugin()
+ }).concat(smp)
+ // ^ note the `.concat(smp)`
+};
+
+const envSpecificConfig = {
+ plugins: smp.wrapPlugins({
  MyOtherPlugin: new MyOtherPlugin()
- }, {
- outputFormat: "human",
- outputTarget: "myFile.txt"
  })
+ // ^ note no `.concat(smp)`
 }
+
+const finalWebpackConfig = webpackMerge([
+ baseConfig,
+ envSpecificConfig
+]);
+
 ```
 
-If you're using `webpack-merge`, then you can do:
+## Options
+
+Options are passed in to the constructor
 
 ```javascript
-// base config file
-const smp = new SpeedMeasurePlugin({
- outputFormat: "human"
-});
-
-const finalConfig = webpackMerge(
- [baseConfig, envSpecificConfig].map(configGenerator =>
- configGenerator({
- smp,
- // other options
- })
- )
-);
-
-// baseConfig
-export const baseConfig = ({ smp }) => ({
- plugins: smp.wrapPlugins({
- MyPlugin: new MyPlugin()
- }).concat(smp)
-})
+const smp = new SpeedMeasurePlugin(options);
+```
 
-// envSpecificConfig
-export const envSpecificConfig = ({ smp }) => ({
- plugins: smp.wrapPlugins({
- MyOtherPlugin: new MyOtherPlugin()
- })
-})
+or as the second argument to the static `wrapPlugins`
+
+```javascript
+SpeedMeasurePlugin.wrapPlugins(pluginMap, options);
 ```
 
-## `outputFormat` ##
+### `options.outputFormat`
+
+Type: `String`<br>
+Default: `"human"`
 
-(default `"json"`)
+Determines in what format this plugin prints its measurements
 
  * `"json"` - produces a JSON blob
  * `"human"` - produces a human readable output
 
-## `outputTarget` ##
+### `options.outputTarget`
 
-(default `null`)
+Type: `String`<br>
+Default: `undefined`
 
- * `null` - prints to `console.log`
- * `"foo"` - prints (and makes, if no file exists) to the file at location `"foo"`
+Specifies the path to a file to output to. If undefined, then output will print to `console.log`
 
-## `disable` ##
+### `options.disable`
 
-(default `null`)
+Type: `Boolean`<br>
+Default: `false`
 
-If truthy, this plugin does nothing at all (recommended by default)
+If truthy, this plugin does nothing at all. It is recommended to set this with something similar to `{ disable: !process.env.MEASURE }` to allow opt-in measurements with a `MEASURE=true npm run build`

package.json

@@ -1,7 +1,7 @@
 {
  "name": "speed-measure-webpack-plugin",
  "version": "0.2.0",
- "description": "A Webpack plugin, to help measure the speed of your other loaders and plugins",
+ "description": "Measure + analyse the speed of your webpack loaders and plugins",
  "main": "index.js",
  "repository": {
  "type": "git",