Make the README a bit shinier

Author: stephencookdev

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`

logo.svg

@@ -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",