From 18c1c99351190bc4a5a4be28f3f6285de371a4d0 Mon Sep 17 00:00:00 2001
From: Jahred Hope <jahredhope@gmail.com>
Date: Fri, 28 Dec 2018 12:44:59 +1100
Subject: [PATCH] feat: Apply plugins to each config (#15)

The plugin may now be applied to each individual configuration that should be included in the render stats instead of applying to the MultiCompiler.

Applying to the MultiCompiler is still supported at this stage.
Call `render()` to choose the configuration that's code will be used to perform the render.

For support with Webpack v5 the documentation now shows applying a compiler to a plugin instead of the other way around.
```js
// Previously: multiCompiler.apply(new HtmlRenderPlugin())
new HtmlRenderPlugin().apply(multiCompiler);
```
---
 README.md                                     | 303 ++++--------------
 options.schema.json                           |   0
 package.json                                  |   3 +-
 src/index.js                                  | 190 +++++++----
 src/renderHtml.js                             |  13 +-
 src/schemas/HtmlRenderWebpackPlugin.json      |  56 ++++
 .../async/__snapshots__/async.test.js.snap    | 216 ++++++++++++-
 tests/test-cases/async/async.test.js          |  23 +-
 tests/test-cases/async/src/render.js          |   2 +-
 tests/test-cases/async/webpack.config.js      |   8 +-
 .../__snapshots__/in-config.test.js.snap      | 156 +++++++++
 tests/test-cases/in-config/in-config.test.js  |  95 ++++++
 .../{basic => in-config}/src/client.js        |   0
 .../{basic => in-config}/src/render.js        |   0
 .../webpack.default.config.js}                |   0
 .../in-config/webpack.directory.config.js     |  17 +
 .../in-config/webpack.paths.config.js         |  29 ++
 .../in-config/webpack.route-info.config.js    |  27 ++
 .../in-config/webpack.routes.config.js        |  20 ++
 .../in-config/webpack.zero-config.config.js   |  14 +
 .../__snapshots__/legacy-apply.test.js.snap}  |  10 +-
 .../legacy-apply.test.js}                     |   2 +-
 tests/test-cases/legacy-apply/src/client.js   |   4 +
 tests/test-cases/legacy-apply/src/render.js   |   8 +
 .../test-cases/legacy-apply/webpack.config.js |  32 ++
 .../multi-compiler-plugin.test.js.snap        | 156 +++++++++
 .../multi-compiler-plugin.test.js             | 132 ++++++++
 .../multi-compiler-plugin/src/client.js       |   4 +
 .../multi-compiler-plugin/src/render.js       |   8 +
 .../multi-compiler-plugin/webpack.config.js   |  32 ++
 .../single-config/webpack.config.js           |   2 +-
 tests/test-cases/watch/watch.test.js          |   9 -
 tests/test-cases/watch/webpack.config.js      |  13 +-
 .../__snapshots__/webpack-stats.test.js.snap  |   2 +-
 tests/test-cases/webpack-stats/src/render.js  |   2 +-
 .../webpack-stats/webpack-stats.test.js       |  10 -
 .../webpack-stats/webpack.config.js           |  16 +-
 yarn.lock                                     |  44 ++-
 38 files changed, 1272 insertions(+), 386 deletions(-)
 create mode 100644 options.schema.json
 create mode 100644 src/schemas/HtmlRenderWebpackPlugin.json
 create mode 100644 tests/test-cases/in-config/__snapshots__/in-config.test.js.snap
 create mode 100644 tests/test-cases/in-config/in-config.test.js
 rename tests/test-cases/{basic => in-config}/src/client.js (100%)
 rename tests/test-cases/{basic => in-config}/src/render.js (100%)
 rename tests/test-cases/{basic/webpack.config.js => in-config/webpack.default.config.js} (100%)
 create mode 100644 tests/test-cases/in-config/webpack.directory.config.js
 create mode 100644 tests/test-cases/in-config/webpack.paths.config.js
 create mode 100644 tests/test-cases/in-config/webpack.route-info.config.js
 create mode 100644 tests/test-cases/in-config/webpack.routes.config.js
 create mode 100644 tests/test-cases/in-config/webpack.zero-config.config.js
 rename tests/test-cases/{basic/__snapshots__/basic.test.js.snap => legacy-apply/__snapshots__/legacy-apply.test.js.snap} (86%)
 rename tests/test-cases/{basic/basic.test.js => legacy-apply/legacy-apply.test.js} (99%)
 create mode 100644 tests/test-cases/legacy-apply/src/client.js
 create mode 100644 tests/test-cases/legacy-apply/src/render.js
 create mode 100644 tests/test-cases/legacy-apply/webpack.config.js
 create mode 100644 tests/test-cases/multi-compiler-plugin/__snapshots__/multi-compiler-plugin.test.js.snap
 create mode 100644 tests/test-cases/multi-compiler-plugin/multi-compiler-plugin.test.js
 create mode 100644 tests/test-cases/multi-compiler-plugin/src/client.js
 create mode 100644 tests/test-cases/multi-compiler-plugin/src/render.js
 create mode 100644 tests/test-cases/multi-compiler-plugin/webpack.config.js

diff --git a/README.md b/README.md
index 34f5a0d..3af3682 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ $ yarn add webpack html-render-webpack-plugin
 ```js
 module.exports = {
   ...,
-  plugins: [new HtmlRenderPlugin()]
+  plugins: [new HtmlRenderPlugin().render()]
 };
 ```
 
@@ -46,9 +46,9 @@ export default ({ assetsByChunkName }) => {
 
 ```html
 <html>
-<body>
-  <script src="/main-daf2166db871ad045ea4.js"></script>
-</body>
+  <body>
+    <script src="/main-daf2166db871ad045ea4.js"></script>
+  </body>
 </html>
 ```
 
@@ -56,7 +56,35 @@ See [the full example below](#example-client-assets).
 
 ## Multiple configuration setup
 
-Create your webpack build with [multiple webpack configurations](https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations).
+Pass an instance of HtmlRenderPlugin to each configuration that should be available during render. Call `.render()` on the configuration that should be used to render.
+
+**webpack.config.js**
+
+```js
+const HtmlRenderPlugin = require("html-render-webpack-plugin");
+
+const htmlRenderPlugin = new HtmlRenderPlugin();
+module.exports = [
+  {
+    name: "render",
+    target: "node", // Creates assets that render HTML that runs well in node
+    plugins: [htmlRenderPlugin.render()]
+  },
+  {
+    name: "client",
+    target: "web", // Creates files that run on the browser
+    plugins: [htmlRenderPlugin]
+  }
+];
+```
+
+See [examples](#examples) for more details.
+
+### Alternative multiple configuration setup
+
+Instead of applying the plugin to each configuration you can apply the plugin to the parent [MultiCompiler](https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations).
+
+This is not recommended and may eventually deprecated in future releases.
 
 **webpack.config.js**
 
@@ -86,7 +114,7 @@ Apply the plugin to your compiler.
 ```js
 const HtmlRenderPlugin = require("html-render-webpack-plugin");
 
-multiCompiler.apply(new HtmlRenderPlugin());
+new HtmlRenderPlugin().apply(multiCompiler);
 ```
 
 Start the build
@@ -106,8 +134,6 @@ const server = new DevServer(multiCompiler, {
 server.listen(8080, "localhost", () => {});
 ```
 
-See [examples](#examples) for more details.
-
 # Options
 
 ## Option: renderEntry _string_
@@ -117,19 +143,21 @@ See [examples](#examples) for more details.
 The entry to use when rendering. Override when using [object syntax](https://webpack.js.org/concepts/entry-points/#object-syntax) in webpack entry.
 
 ```js
-new HtmlRenderPlugin({
-  renderEntry: "myRender"
-});
 ```
 
 **webpack.config.js**
 
-```
-{
+```js
+module.exports = {
   entry: {
-    myRender: './src/myRender.js',
-  }
-}
+    myRender: "./src/myRender.js"
+  },
+  plugins: [
+    new HtmlRenderPlugin({
+      renderEntry: "myRender"
+    }).render()
+  ]
+};
 ```
 
 ## Option: renderDirectory _string_
@@ -221,81 +249,10 @@ new HtmlRenderPlugin({
 
 # Examples
 
-## Example: Basic
-
-**build.js**
-
-```js
-const path = require("path");
-const webpack = require("webpack");
-const config = require("./webpack.config");
-const HtmlRenderPlugin = require("html-render-webpack-plugin");
-
-const compiler = webpack(config);
-
-// Apply the plugin directly to the MultiCompiler
-compiler.apply(new HtmlRenderPlugin());
-
-compiler.run((error, stats) => {
-  console.log("Build complete");
-});
-```
-
-**webpack.config.js**
-
-```js
-module.exports = [
-  {
-    name: "client",
-    target: "web",
-    output: {
-      filename: "client-[name]-[contenthash].js",
-    }
-    entry: path.resolve("src", "client.js")
-  },
-  {
-    name: "render",
-    target: "node",
-    output: {
-      libraryExport: "default",
-      libraryTarget: "umd2",
-      filename: "render-[name]-[contenthash].js",
-    },
-    entry: render: path.resolve("src", "render.js"),
-  }),
-]
-```
-
 ## Example: Client assets
 
 An example of using `mapStatsToParams` to create `<script>` tags.
 
-**build.js**
-
-```js
-const path = require("path");
-const webpack = require("webpack");
-const config = require("./webpack.config");
-const HtmlRenderPlugin = require("html-render-webpack-plugin");
-
-const compiler = webpack(config);
-
-// Apply the plugin directly to the MultiCompiler
-compiler.apply(
-  new HtmlRenderPlugin({
-    mapStatsToParams: ({ webpackStats }) => ({
-      clientStats: webpackStats
-        .toJson()
-        .children.find(({ name }) => name === "client")
-    })
-  })
-);
-
-compiler.run((error, stats) => {
-  console.log("Build complete");
-});
-```
-
 **src/render.js**
 
 ```js
@@ -311,14 +268,25 @@ export default ({ clientStats }) => {
 **webpack.config.js**
 
 ```js
+const path = require("path");
+
+const htmlRenderPlugin = new HtmlRenderPlugin({
+  mapStatsToParams: ({ webpackStats }) => ({
+    clientStats: webpackStats
+      .toJson()
+      .children.find(({ name }) => name === "client")
+  })
+});
+
 module.exports = [
   {
     name: "client",
     target: "web",
     output: {
-      filename: "client-[name]-[contenthash].js",
-    }
-    entry: path.resolve("src", "client.js")
+      filename: "client-[name]-[contenthash].js"
+    },
+    entry: path.resolve("src", "client.js"),
+    plugins: [htmlRenderPlugin]
   },
   {
     name: "render",
@@ -326,157 +294,10 @@ module.exports = [
     output: {
       libraryExport: "default",
       libraryTarget: "umd2",
-      filename: "render-[name]-[contenthash].js",
+      filename: "render-[name]-[contenthash].js"
     },
     entry: path.resolve("src", "render.js"),
-  }),
-]
-```
-
-## Example: Live reload
-
-**dev-server.js**
-
-```js
-const DevServer = require("webpack-dev-server");
-const getCompiler = require("./getCompiler");
-const compiler = getCompiler({ liveReload: true, mode: "development" });
-
-const server = new DevServer(compiler, {
-  compress: true
-});
-server.listen(8080, "localhost", function() {});
-```
-
-**getCompiler.js**
-
-```js
-const fs = require("fs");
-const path = require("path");
-const webpack = require("webpack");
-const getConfig = require("./webpack.config");
-const RenderStaticPlugin = require("html-render-webpack-plugin");
-
-module.exports = function getCompiler({ liveReload, mode }) {
-  const compiler = webpack(getConfig({ liveReload, mode }));
-
-  const cwd = process.cwd();
-  const distDirectory = path.join(cwd, "dist");
-
-  const routes = ["", "b", "a", "c", "about", "home", "contact/us"];
-  compiler.apply(
-    new RenderStaticPlugin({
-      routes,
-      mapStatsToParams: ({ webpackStats }) => {
-        const clientStats = webpackStats
-          .toJson()
-          .children.find(({ name }) => name === "client");
-        const fileSystem = compiler.compilers[0].outputFileSystem.readFileSync
-          ? compiler.compilers[0].outputFileSystem
-          : fs;
-        return {
-          clientStats,
-          reactLoadableManifest: JSON.parse(
-            fileSystem.readFileSync(
-              path.join(clientStats.outputPath, "react-loadable-manifest.json"),
-              "utf8"
-            )
-          )
-        };
-      },
-      renderDirectory: distDirectory,
-      fs,
-      verbose: true
-    })
-  );
-
-  return compiler;
-};
-```
-
-**webpack.config.js**
-
-```js
-const webpack = require("webpack");
-const merge = require("webpack-merge");
-const path = require("path");
-const {
-  ReactLoadablePlugin
-} = require("@jahredhope/react-loadable-webpack-plugin");
-
-const cwd = process.cwd();
-const srcPath = path.resolve(cwd, "./src");
-const routes = {
-  renderEntry: path.resolve(srcPath, "render.js"),
-  clientEntry: path.resolve(srcPath, "client.js")
-};
-
-module.exports = ({ liveReload, mode }) => {
-  const domain = "http://localhost:8080";
-  const liveReloadEntry = `${require.resolve(
-    "webpack-dev-server/client/"
-  )}?${domain}`;
-
-  const common = {
-    mode,
-    output: {
-      publicPath: "/"
-    },
-    module: {
-      rules: [
-        {
-          test: /\.m?js$/,
-          exclude: /(node_modules)/,
-          use: {
-            loader: "babel-loader"
-          }
-        }
-      ]
-    }
-  };
-  const clientEntry = liveReload
-    ? [liveReloadEntry, routes.clientEntry]
-    : routes.clientEntry;
-  return [
-    merge(common, {
-      output: {
-        filename: "client-[name]-[contenthash].js"
-      },
-      optimization: {
-        runtimeChunk: {
-          name: "manifest"
-        },
-        splitChunks: {
-          cacheGroups: {
-            vendor: {
-              test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
-              name: "vendor",
-              chunks: "all"
-            }
-          }
-        }
-      },
-      name: "client",
-      target: "web",
-      entry: clientEntry,
-      plugins: [
-        new ReactLoadablePlugin({
-          filename: "react-loadable-manifest.json"
-        }),
-        new webpack.HashedModuleIdsPlugin()
-      ]
-    }),
-    merge(common, {
-      output: {
-        libraryExport: "default",
-        library: "static",
-        libraryTarget: "umd2",
-        filename: "render-[name]-[contenthash].js"
-      },
-      name: "render",
-      target: "node",
-      entry: routes.renderEntry
-    })
-  ];
-};
+    plugins: [htmlRenderPlugin.render()]
+  }
+];
 ```
diff --git a/options.schema.json b/options.schema.json
new file mode 100644
index 0000000..e69de29
diff --git a/package.json b/package.json
index 6954480..0a8916c 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "jest": "23.6.0",
     "prettier": "1.15.2",
     "semantic-release": "15.12.1",
-    "webpack": "4.26.0"
+    "webpack": "4.28.2",
+    "webpack-merge": "4.1.5"
   },
   "dependencies": {
     "chalk": "^2.4.1",
diff --git a/src/index.js b/src/index.js
index cf38bc6..b2a6c73 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,53 +1,72 @@
 const renderHtml = require("./renderHtml");
 const chalk = require("chalk");
 
+const validateOptions = require("schema-utils");
+const schema = require("./schemas/HtmlRenderWebpackPlugin.json");
+
 const MultiStats = require("webpack/lib/MultiStats");
 
 const returnEmptyObject = () => ({});
 const defaultTransformFilePath = ({ route }) => route;
 
 module.exports = class HtmlRenderPlugin {
-  constructor({
-    log = console.log,
-    verbose = false,
-    routes = [""],
-    mapStatsToParams = returnEmptyObject,
-    renderDirectory = "dist",
-    renderConcurrency = false,
-    transformFilePath = defaultTransformFilePath,
-    renderEntry = "main"
-  } = {}) {
-    this.log = log;
-    this.mapStatsToParams = mapStatsToParams;
-    this.renderDirectory = renderDirectory;
-    this.renderEntry = renderEntry;
-    this.routes = routes;
-    this.transformFilePath = transformFilePath;
-    this.verbose = verbose;
-    this.renderConcurrency = renderConcurrency;
+  constructor(options = {}) {
+    validateOptions(schema, options, "HTML Render Webpack Plugin");
+
+    this.mapStatsToParams = options.mapStatsToParams || returnEmptyObject;
+    this.renderDirectory = options.renderDirectory || "dist";
+    this.renderEntry = options.renderEntry || "main";
+    this.routes = options.routes || [""];
+    this.transformFilePath =
+      options.transformFilePath || defaultTransformFilePath;
+    this.verbose = options.verbose || false;
+    this.renderConcurrency = options.renderConcurrency || "serial";
+    this.compilerToRenderWith = options.compilerToRenderWith;
+
+    this.compilersComplete = 0;
+    this.compilersRunning = 0;
+    this.compilers = [];
+    this.compilations = [];
+    this.defaultHookOptions = { name: "HtmlRenderPlugin" };
 
     this.onRender = this.onRender.bind(this);
     this.logError = this.logError.bind(this);
     this.trace = this.trace.bind(this);
+    this.apply = this.apply.bind(this);
+    this.render = this.render.bind(this);
   }
   logError(...args) {
-    this.log(chalk.red("🚨 HtmlRenderPlugin:"), ...args);
+    console.log(chalk.red("🚨 HtmlRenderPlugin:"), ...args);
   }
   trace(...args) {
     if (this.verbose) {
-      this.log(chalk.blue("HtmlRenderPlugin:"), ...args);
+      console.log(chalk.blue("HtmlRenderPlugin:"), ...args);
     }
   }
-  async onRender() {
+  async onRender(currentCompilation) {
     this.trace(`Starting render`);
 
+    if (!this.renderCompiler) {
+      const errorMessage = `Unable to find render compiler. Add \`.render()\` to any one configuration.`;
+      this.logError(errorMessage);
+      throw new Error(errorMessage);
+    }
+    if (!this.renderCompilation) {
+      const errorMessage = `Unable to find render compilation. Something may have gone wrong during render build.`;
+      this.logError(errorMessage);
+      throw new Error(errorMessage);
+    }
+
     const renderStats = this.renderCompilation.getStats();
 
-    const webpackStats = new MultiStats(
-      this.compilations.map(compilation => {
-        return compilation.getStats();
-      })
-    );
+    const webpackStats =
+      this.compilations.length > 1
+        ? new MultiStats(
+            this.compilations.map(compilation => {
+              return compilation.getStats();
+            })
+          )
+        : currentCompilation.getStats();
 
     try {
       await renderHtml({
@@ -65,19 +84,12 @@ module.exports = class HtmlRenderPlugin {
       });
     } catch (error) {
       this.logError("An error occured rendering HTML", error);
+      throw error;
     }
   }
-  apply(compiler) {
-    this.compilers = compiler.compilers || [compiler];
-    this.renderCompiler =
-      this.compilers.length === 1
-        ? this.compilers[0]
-        : this.compilers.find(childCompiler => childCompiler.name === "render");
-    if (!this.renderCompiler) {
-      const errorMessage = `Unable to find render compiler. Ensure a config exists with name 'render'.`;
-      this.logError(errorMessage);
-      throw new Error(errorMessage);
-    }
+  applyRenderPlugin(compiler) {
+    this.trace("Applying render plugin");
+    this.renderCompiler = compiler;
 
     if (
       this.renderCompiler.options.output &&
@@ -86,40 +98,84 @@ module.exports = class HtmlRenderPlugin {
       this.renderDirectory =
         this.renderDirectory || this.renderCompiler.options.output.path;
     }
-    const hookOptions = { name: "HtmlRenderPlugin" };
-    this.renderCompiler.hooks.emit.tap(hookOptions, compilation => {
+    this.renderCompiler.hooks.emit.tap(this.defaultHookOptions, compilation => {
       this.renderCompilation = compilation;
     });
+  }
+  applyCompiler(compiler, options = {}) {
+    this.compilers.push(compiler);
+    const compilerName = compiler.name || compiler.options.name;
+    this.trace(`Recieved compiler: ${compilerName}`);
 
-    this.compilations = [];
-    let compilersToRun = this.compilers.length;
-    let compilersRunning = 0;
-    this.compilers.forEach((childCompiler, index) => {
-      childCompiler.hooks.run.tap(hookOptions, () => compilersRunning++);
-      childCompiler.hooks.watchRun.tap(hookOptions, () => compilersRunning++);
-      childCompiler.hooks.emit.tap(hookOptions, compilation => {
-        this.compilations[index] = compilation;
-        compilersRunning--;
-        compilersToRun--;
-      });
+    compiler.hooks.run.tap(this.defaultHookOptions, () => {
+      this.compilersRunning++;
+    });
+    compiler.hooks.watchRun.tap(
+      this.defaultHookOptions,
+      () => this.compilersRunning++
+    );
+    compiler.hooks.emit.tap(this.defaultHookOptions, compilation => {
+      const index = this.compilers.indexOf(compilation.compiler);
+      this.compilations[index] = compilation;
+      this.compilersRunning--;
+    });
 
-      childCompiler.hooks.afterEmit.tapPromise(
-        hookOptions,
-        async compilation => {
-          this.clientCompilation = compilation;
-          if (compilersRunning > 0 || compilersToRun > 0) {
-            this.trace(
-              `Assets emitted for ${
-                childCompiler.name
-              }. Waiting for ${compilersRunning ||
-                compilersToRun} other compilers`
-            );
-            return;
-          }
-          this.trace(`Assets emitted for ${childCompiler.name}`);
-          return this.onRender();
+    compiler.hooks.afterEmit.tapPromise(
+      this.defaultHookOptions,
+      async compilation => {
+        this.compilersComplete++;
+        if (this.compilersRunning > 0) {
+          this.trace(
+            `Assets emitted for ${compilerName}. Waiting for ${
+              this.compilersRunning
+            } other currently running compilers`
+          );
+          return;
         }
-      );
-    });
+        if (this.compilersComplete < this.compilers.length) {
+          this.trace(
+            `Assets emitted for ${compilerName}. Waiting for ${this.compilers
+              .length -
+              this
+                .compilersComplete} other compilers to finish their first build.`
+          );
+          return;
+        }
+        this.trace(
+          `Assets emitted for ${compilerName}. compilersComplete ${
+            this.compilersComplete
+          }. No. Compilers: ${this.compilers.length}. Compilers running: ${
+            this.compilersRunning
+          }.`
+        );
+        return this.onRender(compilation);
+      }
+    );
+    if (
+      options.render ||
+      (this.compilerToRenderWith && compilerName === this.compilerToRenderWith)
+    ) {
+      this.applyRenderPlugin(compiler);
+    }
+  }
+  apply(compiler, options = {}) {
+    const isMultiCompiler = Boolean(compiler.compilers);
+    if (isMultiCompiler) {
+      this.trace("Adding MultiCompiler");
+      compiler.compilers.forEach(compiler => {
+        const compilerName = compiler.name || compiler.options.name;
+        const compilerToRenderWith = this.compilerToRenderWith || "render";
+        this.applyCompiler(compiler, {
+          ...options,
+          render: compilerToRenderWith === compilerName
+        });
+      });
+    } else {
+      this.trace("Adding Compiler");
+      this.applyCompiler(compiler, options);
+    }
+  }
+  render() {
+    return compiler => this.apply(compiler, { render: true });
   }
 };
diff --git a/src/renderHtml.js b/src/renderHtml.js
index 658ed07..c7d33d1 100644
--- a/src/renderHtml.js
+++ b/src/renderHtml.js
@@ -17,15 +17,16 @@ module.exports = async function renderHtml({
   transformFilePath,
   webpackStats
 }) {
-  const renderFile = renderStats.assetsByChunkName[renderEntry];
-  trace("Render route:", { renderFile });
-  if (!renderFile) {
+  const asset = renderStats.assetsByChunkName[renderEntry];
+  if (!asset) {
     throw new Error(
       `Unable to find renderEntry "${renderEntry}" in assets. Possible entries are: ${Object.keys(
         renderStats.assetsByChunkName
       ).join(", ")}.`
     );
   }
+  const renderFile = typeof asset === "string" ? asset : asset.name;
+  trace("Render route:", { renderFile });
 
   const renderFunc = createRenderer({
     renderCompilation,
@@ -91,11 +92,9 @@ module.exports = async function renderHtml({
       console.error(
         `🚨 ${chalk.red(`An error occured rendering "`)} ${chalk.blue(
           renderFile
-        )}". See below error.`
+        )}". Exiting render.`
       );
-      console.error(error);
-      await emitFile(newFilePath, error.toString());
-      return;
+      throw error;
     }
 
     if (typeof renderResult !== "string") {
diff --git a/src/schemas/HtmlRenderWebpackPlugin.json b/src/schemas/HtmlRenderWebpackPlugin.json
new file mode 100644
index 0000000..90eee3e
--- /dev/null
+++ b/src/schemas/HtmlRenderWebpackPlugin.json
@@ -0,0 +1,56 @@
+{
+  "title": "HTMLRenderOptionsArgument",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "verbose": {
+      "description": "If true, use console to log progress.",
+      "type": "boolean"
+    },
+    "routes": {
+      "description": "List of routes to render. A file is created for each route.",
+
+      "type": "array",
+      "items": {
+        "description": "A rule condition",
+        "anyOf": [
+          {
+            "type": "object",
+            "additionalProperties": true,
+            "properties": {
+              "route": {
+                "description": "The path to generate",
+                "type": "string"
+              }
+            }
+          },
+          { "type": "string" }
+        ]
+      }
+    },
+    "mapStatsToParams": {
+      "description": "Used to pass additional values to each render.",
+      "instanceof": "Function"
+    },
+    "renderDirectory": {
+      "description": "The directory to render files to.",
+      "type": "string"
+    },
+    "renderConcurrency": {
+      "description": "Whether to render serial or parallel",
+      "type": "string"
+    },
+    "transformFilePath": {
+      "description": "Used to build the file path from the route.",
+      "instanceof": "Function"
+    },
+    "renderEntry": {
+      "description": "Which webpack entry should be used to render.",
+      "type": "string"
+    },
+    "compilerToRenderWith": {
+      "description": "Used to automatically select a configuration to render from.",
+      "type": "string"
+    }
+  }
+}
diff --git a/tests/test-cases/async/__snapshots__/async.test.js.snap b/tests/test-cases/async/__snapshots__/async.test.js.snap
index 55de695..4d45034 100644
--- a/tests/test-cases/async/__snapshots__/async.test.js.snap
+++ b/tests/test-cases/async/__snapshots__/async.test.js.snap
@@ -17,37 +17,241 @@ Object {
 
 exports[`Render asyncronously should render a multiple files at once 1`] = `
 Object {
-  "pageA": Object {
+  "page0": Object {
     "index.html": "<html>
 <body>
   Rendered with:&nbsp;
   <code>[
     {
-      \\"route\\": \\"pageA\\"
+      \\"route\\": \\"page0\\"
     }
   ]</code>
 </body>
 </html>",
   },
-  "pageB": Object {
+  "page1": Object {
     "index.html": "<html>
 <body>
   Rendered with:&nbsp;
   <code>[
     {
-      \\"route\\": \\"pageB\\"
+      \\"route\\": \\"page1\\"
     }
   ]</code>
 </body>
 </html>",
   },
-  "pageC": Object {
+  "page10": Object {
     "index.html": "<html>
 <body>
   Rendered with:&nbsp;
   <code>[
     {
-      \\"route\\": \\"pageC\\"
+      \\"route\\": \\"page10\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page11": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page11\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page12": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page12\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page13": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page13\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page14": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page14\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page15": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page15\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page16": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page16\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page17": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page17\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page18": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page18\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page19": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page19\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page2": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page2\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page3": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page3\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page4": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page4\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page5": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page5\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page6": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page6\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page7": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page7\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page8": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page8\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "page9": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"page9\\"
     }
   ]</code>
 </body>
diff --git a/tests/test-cases/async/async.test.js b/tests/test-cases/async/async.test.js
index d7f9a6c..9f787af 100644
--- a/tests/test-cases/async/async.test.js
+++ b/tests/test-cases/async/async.test.js
@@ -10,13 +10,11 @@ describe("Render asyncronously", () => {
   const renderDirectory = path.join(process.cwd(), "dist", "render");
 
   it("should render a HTML once resolved", async done => {
-    const compiler = webpack(config);
+    const compiler = webpack(config(new HtmlRenderPlugin({ renderDirectory })));
 
     const memoryFs = new MemoryFS();
     compiler.outputFileSystem = memoryFs;
 
-    compiler.apply(new HtmlRenderPlugin({ renderDirectory }));
-
     compiler.run(() => {
       const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
       expect(contents).toMatchSnapshot();
@@ -24,19 +22,20 @@ describe("Render asyncronously", () => {
     });
   });
   it("should render a multiple files at once", async done => {
-    const compiler = webpack(config);
+    jest.setTimeout(1000);
+    const compiler = webpack(
+      config(
+        new HtmlRenderPlugin({
+          renderConcurrency: "parallel",
+          routes: new Array(20).fill(null).map((_, i) => `page${i}`),
+          renderDirectory
+        })
+      )
+    );
 
     const memoryFs = new MemoryFS();
     compiler.outputFileSystem = memoryFs;
 
-    compiler.apply(
-      new HtmlRenderPlugin({
-        parallelRender: true,
-        routes: ["pageA", "pageB", "pageC"],
-        renderDirectory
-      })
-    );
-
     compiler.run(error => {
       expect(error).toBe(null);
       const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
diff --git a/tests/test-cases/async/src/render.js b/tests/test-cases/async/src/render.js
index 66c9d58..5c6a04b 100644
--- a/tests/test-cases/async/src/render.js
+++ b/tests/test-cases/async/src/render.js
@@ -1,5 +1,5 @@
 export default async function exampleRender(...params) {
-  await new Promise(resolve => setTimeout(resolve, 200));
+  await new Promise(resolve => setTimeout(resolve, 300));
   return `<html>
 <body>
   Rendered with:&nbsp;
diff --git a/tests/test-cases/async/webpack.config.js b/tests/test-cases/async/webpack.config.js
index 6227553..9ac2d5a 100644
--- a/tests/test-cases/async/webpack.config.js
+++ b/tests/test-cases/async/webpack.config.js
@@ -6,7 +6,7 @@ const paths = {
   clientEntry: path.resolve(srcPath, "client.js")
 };
 
-module.exports = [
+module.exports = plugin => [
   {
     name: "client",
     target: "web",
@@ -14,7 +14,8 @@ module.exports = [
     entry: paths.clientEntry,
     output: {
       filename: "client-[name]-[contenthash].js"
-    }
+    },
+    plugins: [plugin]
   },
   {
     dependencies: ["client"],
@@ -27,6 +28,7 @@ module.exports = [
       library: "static",
       libraryTarget: "umd2",
       filename: "render-[name]-[contenthash].js"
-    }
+    },
+    plugins: [plugin.render()]
   }
 ];
diff --git a/tests/test-cases/in-config/__snapshots__/in-config.test.js.snap b/tests/test-cases/in-config/__snapshots__/in-config.test.js.snap
new file mode 100644
index 0000000..a84329b
--- /dev/null
+++ b/tests/test-cases/in-config/__snapshots__/in-config.test.js.snap
@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render HTML from in-config Plugin should allow custom file paths 1`] = `
+Object {
+  "development": Object {
+    "en-au": Object {
+      "about": Object {
+        "us": Object {
+          "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"about/us\\",
+      \\"language\\": \\"en-au\\",
+      \\"environment\\": \\"development\\"
+    }
+  ]</code>
+</body>
+</html>",
+        },
+      },
+    },
+  },
+  "production": Object {
+    "en-us": Object {
+      "about": Object {
+        "us": Object {
+          "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"about/us\\",
+      \\"language\\": \\"en-us\\",
+      \\"environment\\": \\"production\\"
+    }
+  ]</code>
+</body>
+</html>",
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`Render HTML from in-config Plugin should render a HTML file 1`] = `
+"<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"\\"
+    }
+  ]</code>
+</body>
+</html>"
+`;
+
+exports[`Render HTML from in-config Plugin should render a file per route 1`] = `
+Object {
+  "error.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"error.html\\"
+    }
+  ]</code>
+</body>
+</html>",
+  "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"\\"
+    }
+  ]</code>
+</body>
+</html>",
+  "pageA": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageA\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "pageB": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageB\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+}
+`;
+
+exports[`Render HTML from in-config Plugin should render in a custom directory 1`] = `
+Object {
+  "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"\\"
+    }
+  ]</code>
+</body>
+</html>",
+}
+`;
+
+exports[`Render HTML from in-config Plugin should render routes with extra information 1`] = `
+Object {
+  "development": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"development\\",
+      \\"language\\": \\"en-us\\",
+      \\"environment\\": \\"development\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "production": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"production\\",
+      \\"language\\": \\"en-us\\",
+      \\"environment\\": \\"production\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+}
+`;
diff --git a/tests/test-cases/in-config/in-config.test.js b/tests/test-cases/in-config/in-config.test.js
new file mode 100644
index 0000000..a9800e3
--- /dev/null
+++ b/tests/test-cases/in-config/in-config.test.js
@@ -0,0 +1,95 @@
+const MemoryFS = require("memory-fs");
+const webpack = require("webpack");
+const path = require("path");
+
+const getDirContentsSync = require("../../utils/getDirContentsSync");
+
+describe("Render HTML from in-config Plugin", () => {
+  const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+  it("should render a HTML file", async done => {
+    const compiler = webpack(require("./webpack.zero-config.config"));
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = memoryFs.readFileSync(
+        path.join(process.cwd(), "dist", "index.html"),
+        "utf8"
+      );
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should render in a custom directory", async done => {
+    const compiler = webpack(require("./webpack.directory.config.js"));
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, {
+        fs: memoryFs
+      });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should render a file per route", async done => {
+    const compiler = webpack(require("./webpack.routes.config.js"));
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+
+  it("should render routes with extra information", async done => {
+    const compiler = webpack(require("./webpack.route-info.config.js"));
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should allow custom file paths", async done => {
+    const compiler = webpack(require("./webpack.paths.config.js"));
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      expect(
+        memoryFs.existsSync(
+          path.join(renderDirectory, "/production/en-us/about/us/index.html")
+        )
+      ).toBe(true);
+      expect(
+        memoryFs.existsSync(
+          path.join(renderDirectory, "/development/en-au/about/us/index.html")
+        )
+      ).toBe(true);
+      expect(
+        memoryFs.existsSync(path.join(renderDirectory, "/about/us/index.html"))
+      ).toBe(false);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+
+      done();
+    });
+  });
+});
diff --git a/tests/test-cases/basic/src/client.js b/tests/test-cases/in-config/src/client.js
similarity index 100%
rename from tests/test-cases/basic/src/client.js
rename to tests/test-cases/in-config/src/client.js
diff --git a/tests/test-cases/basic/src/render.js b/tests/test-cases/in-config/src/render.js
similarity index 100%
rename from tests/test-cases/basic/src/render.js
rename to tests/test-cases/in-config/src/render.js
diff --git a/tests/test-cases/basic/webpack.config.js b/tests/test-cases/in-config/webpack.default.config.js
similarity index 100%
rename from tests/test-cases/basic/webpack.config.js
rename to tests/test-cases/in-config/webpack.default.config.js
diff --git a/tests/test-cases/in-config/webpack.directory.config.js b/tests/test-cases/in-config/webpack.directory.config.js
new file mode 100644
index 0000000..3bb15fc
--- /dev/null
+++ b/tests/test-cases/in-config/webpack.directory.config.js
@@ -0,0 +1,17 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const defaultConfig = require("./webpack.default.config");
+const HtmlRenderPlugin = require("../../../src");
+
+const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+const htmlRenderPlugin = new HtmlRenderPlugin({ renderDirectory });
+
+module.exports = [
+  merge(defaultConfig[0], {
+    plugins: [htmlRenderPlugin]
+  }),
+  merge(defaultConfig[1], {
+    plugins: [htmlRenderPlugin.render()]
+  })
+];
diff --git a/tests/test-cases/in-config/webpack.paths.config.js b/tests/test-cases/in-config/webpack.paths.config.js
new file mode 100644
index 0000000..7d5b755
--- /dev/null
+++ b/tests/test-cases/in-config/webpack.paths.config.js
@@ -0,0 +1,29 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const defaultConfig = require("./webpack.default.config");
+const HtmlRenderPlugin = require("../../../src");
+
+const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+const htmlRenderPlugin = new HtmlRenderPlugin({
+  transformFilePath: ({ route, language, environment }) =>
+    `/${environment}/${language}/${route}`,
+  routes: [
+    { route: "about/us", language: "en-us", environment: "production" },
+    {
+      route: "about/us",
+      language: "en-au",
+      environment: "development"
+    }
+  ],
+  renderDirectory
+});
+
+module.exports = [
+  merge(defaultConfig[0], {
+    plugins: [htmlRenderPlugin]
+  }),
+  merge(defaultConfig[1], {
+    plugins: [htmlRenderPlugin.render()]
+  })
+];
diff --git a/tests/test-cases/in-config/webpack.route-info.config.js b/tests/test-cases/in-config/webpack.route-info.config.js
new file mode 100644
index 0000000..8d5da21
--- /dev/null
+++ b/tests/test-cases/in-config/webpack.route-info.config.js
@@ -0,0 +1,27 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const defaultConfig = require("./webpack.default.config");
+const HtmlRenderPlugin = require("../../../src");
+
+const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+const htmlRenderPlugin = new HtmlRenderPlugin({
+  renderDirectory,
+  routes: [
+    { route: "production", language: "en-us", environment: "production" },
+    {
+      route: "development",
+      language: "en-us",
+      environment: "development"
+    }
+  ]
+});
+
+module.exports = [
+  merge(defaultConfig[0], {
+    plugins: [htmlRenderPlugin]
+  }),
+  merge(defaultConfig[1], {
+    plugins: [htmlRenderPlugin.render()]
+  })
+];
diff --git a/tests/test-cases/in-config/webpack.routes.config.js b/tests/test-cases/in-config/webpack.routes.config.js
new file mode 100644
index 0000000..65dcad1
--- /dev/null
+++ b/tests/test-cases/in-config/webpack.routes.config.js
@@ -0,0 +1,20 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const defaultConfig = require("./webpack.default.config");
+const HtmlRenderPlugin = require("../../../src");
+
+const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+const htmlRenderPlugin = new HtmlRenderPlugin({
+  renderDirectory,
+  routes: ["", "pageA", "pageB", "error.html"]
+});
+
+module.exports = [
+  merge(defaultConfig[0], {
+    plugins: [htmlRenderPlugin]
+  }),
+  merge(defaultConfig[1], {
+    plugins: [htmlRenderPlugin.render()]
+  })
+];
diff --git a/tests/test-cases/in-config/webpack.zero-config.config.js b/tests/test-cases/in-config/webpack.zero-config.config.js
new file mode 100644
index 0000000..397b9c2
--- /dev/null
+++ b/tests/test-cases/in-config/webpack.zero-config.config.js
@@ -0,0 +1,14 @@
+const merge = require("webpack-merge");
+const defaultConfig = require("./webpack.default.config");
+const HtmlRenderPlugin = require("../../../src");
+
+const htmlRenderPlugin = new HtmlRenderPlugin();
+
+module.exports = [
+  merge(defaultConfig[0], {
+    plugins: [htmlRenderPlugin]
+  }),
+  merge(defaultConfig[1], {
+    plugins: [htmlRenderPlugin.render()]
+  })
+];
diff --git a/tests/test-cases/basic/__snapshots__/basic.test.js.snap b/tests/test-cases/legacy-apply/__snapshots__/legacy-apply.test.js.snap
similarity index 86%
rename from tests/test-cases/basic/__snapshots__/basic.test.js.snap
rename to tests/test-cases/legacy-apply/__snapshots__/legacy-apply.test.js.snap
index ae733e8..39973c1 100644
--- a/tests/test-cases/basic/__snapshots__/basic.test.js.snap
+++ b/tests/test-cases/legacy-apply/__snapshots__/legacy-apply.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render HTML should allow custom file paths 1`] = `
+exports[`Use legacy apply should allow custom file paths 1`] = `
 Object {
   "development": Object {
     "en-au": Object {
@@ -45,7 +45,7 @@ Object {
 }
 `;
 
-exports[`Render HTML should render a HTML file 1`] = `
+exports[`Use legacy apply should render a HTML file 1`] = `
 "<html>
 <body>
   Rendered with:&nbsp;
@@ -58,7 +58,7 @@ exports[`Render HTML should render a HTML file 1`] = `
 </html>"
 `;
 
-exports[`Render HTML should render a file per route 1`] = `
+exports[`Use legacy apply should render a file per route 1`] = `
 Object {
   "error.html": "<html>
 <body>
@@ -107,7 +107,7 @@ Object {
 }
 `;
 
-exports[`Render HTML should render in a custom directory 1`] = `
+exports[`Use legacy apply should render in a custom directory 1`] = `
 Object {
   "index.html": "<html>
 <body>
@@ -122,7 +122,7 @@ Object {
 }
 `;
 
-exports[`Render HTML should render routes with extra information 1`] = `
+exports[`Use legacy apply should render routes with extra information 1`] = `
 Object {
   "development": Object {
     "index.html": "<html>
diff --git a/tests/test-cases/basic/basic.test.js b/tests/test-cases/legacy-apply/legacy-apply.test.js
similarity index 99%
rename from tests/test-cases/basic/basic.test.js
rename to tests/test-cases/legacy-apply/legacy-apply.test.js
index ed683fe..3599f9b 100644
--- a/tests/test-cases/basic/basic.test.js
+++ b/tests/test-cases/legacy-apply/legacy-apply.test.js
@@ -6,7 +6,7 @@ const config = require("./webpack.config");
 const HtmlRenderPlugin = require("../../../src");
 const getDirContentsSync = require("../../utils/getDirContentsSync");
 
-describe("Render HTML", () => {
+describe("Use legacy apply", () => {
   const renderDirectory = path.join(process.cwd(), "dist", "render");
 
   it("should render a HTML file", async done => {
diff --git a/tests/test-cases/legacy-apply/src/client.js b/tests/test-cases/legacy-apply/src/client.js
new file mode 100644
index 0000000..30921d2
--- /dev/null
+++ b/tests/test-cases/legacy-apply/src/client.js
@@ -0,0 +1,4 @@
+module.exports = async () => {
+  const bar = "foo";
+  return bar;
+};
diff --git a/tests/test-cases/legacy-apply/src/render.js b/tests/test-cases/legacy-apply/src/render.js
new file mode 100644
index 0000000..7cfcc7f
--- /dev/null
+++ b/tests/test-cases/legacy-apply/src/render.js
@@ -0,0 +1,8 @@
+export default function exampleRender(...params) {
+  return `<html>
+<body>
+  Rendered with:&nbsp;
+  <code>${JSON.stringify(params, null, 2).replace(/\n/g, "\n  ")}</code>
+</body>
+</html>`;
+}
diff --git a/tests/test-cases/legacy-apply/webpack.config.js b/tests/test-cases/legacy-apply/webpack.config.js
new file mode 100644
index 0000000..6227553
--- /dev/null
+++ b/tests/test-cases/legacy-apply/webpack.config.js
@@ -0,0 +1,32 @@
+const path = require("path");
+
+const srcPath = path.resolve(__dirname, "./src");
+const paths = {
+  renderEntry: path.resolve(srcPath, "render.js"),
+  clientEntry: path.resolve(srcPath, "client.js")
+};
+
+module.exports = [
+  {
+    name: "client",
+    target: "web",
+    mode: "production",
+    entry: paths.clientEntry,
+    output: {
+      filename: "client-[name]-[contenthash].js"
+    }
+  },
+  {
+    dependencies: ["client"],
+    name: "render",
+    target: "node",
+    mode: "production",
+    entry: paths.renderEntry,
+    output: {
+      libraryExport: "default",
+      library: "static",
+      libraryTarget: "umd2",
+      filename: "render-[name]-[contenthash].js"
+    }
+  }
+];
diff --git a/tests/test-cases/multi-compiler-plugin/__snapshots__/multi-compiler-plugin.test.js.snap b/tests/test-cases/multi-compiler-plugin/__snapshots__/multi-compiler-plugin.test.js.snap
new file mode 100644
index 0000000..9b34b0f
--- /dev/null
+++ b/tests/test-cases/multi-compiler-plugin/__snapshots__/multi-compiler-plugin.test.js.snap
@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Plugin applied to MultiCompiler should allow custom file paths 1`] = `
+Object {
+  "development": Object {
+    "en-au": Object {
+      "about": Object {
+        "us": Object {
+          "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"about/us\\",
+      \\"language\\": \\"en-au\\",
+      \\"environment\\": \\"development\\"
+    }
+  ]</code>
+</body>
+</html>",
+        },
+      },
+    },
+  },
+  "production": Object {
+    "en-us": Object {
+      "about": Object {
+        "us": Object {
+          "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"about/us\\",
+      \\"language\\": \\"en-us\\",
+      \\"environment\\": \\"production\\"
+    }
+  ]</code>
+</body>
+</html>",
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`Plugin applied to MultiCompiler should render a HTML file 1`] = `
+"<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"\\"
+    }
+  ]</code>
+</body>
+</html>"
+`;
+
+exports[`Plugin applied to MultiCompiler should render a file per route 1`] = `
+Object {
+  "error.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"error.html\\"
+    }
+  ]</code>
+</body>
+</html>",
+  "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"\\"
+    }
+  ]</code>
+</body>
+</html>",
+  "pageA": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageA\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "pageB": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageB\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+}
+`;
+
+exports[`Plugin applied to MultiCompiler should render in a custom directory 1`] = `
+Object {
+  "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"\\"
+    }
+  ]</code>
+</body>
+</html>",
+}
+`;
+
+exports[`Plugin applied to MultiCompiler should render routes with extra information 1`] = `
+Object {
+  "development": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"development\\",
+      \\"language\\": \\"en-us\\",
+      \\"environment\\": \\"development\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "production": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"production\\",
+      \\"language\\": \\"en-us\\",
+      \\"environment\\": \\"production\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+}
+`;
diff --git a/tests/test-cases/multi-compiler-plugin/multi-compiler-plugin.test.js b/tests/test-cases/multi-compiler-plugin/multi-compiler-plugin.test.js
new file mode 100644
index 0000000..193040b
--- /dev/null
+++ b/tests/test-cases/multi-compiler-plugin/multi-compiler-plugin.test.js
@@ -0,0 +1,132 @@
+const MemoryFS = require("memory-fs");
+const webpack = require("webpack");
+const path = require("path");
+
+const config = require("./webpack.config");
+const HtmlRenderPlugin = require("../../../src");
+const getDirContentsSync = require("../../utils/getDirContentsSync");
+
+describe("Plugin applied to MultiCompiler", () => {
+  const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+  it("should render a HTML file", async done => {
+    const compiler = webpack(config);
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    new HtmlRenderPlugin().apply(compiler);
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = memoryFs.readFileSync(
+        path.join(process.cwd(), "dist", "index.html"),
+        "utf8"
+      );
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should render in a custom directory", async done => {
+    const compiler = webpack(config);
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    new HtmlRenderPlugin({ renderDirectory }).apply(compiler);
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, {
+        fs: memoryFs
+      });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should render a file per route", async done => {
+    const compiler = webpack(config);
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    new HtmlRenderPlugin({
+      routes: ["", "pageA", "pageB", "error.html"],
+      renderDirectory
+    }).apply(compiler);
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+
+  it("should render routes with extra information", async done => {
+    const compiler = webpack(config);
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    new HtmlRenderPlugin({
+      routes: [
+        { route: "production", language: "en-us", environment: "production" },
+        {
+          route: "development",
+          language: "en-us",
+          environment: "development"
+        }
+      ],
+      renderDirectory
+    }).apply(compiler);
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should allow custom file paths", async done => {
+    const compiler = webpack(config);
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    new HtmlRenderPlugin({
+      transformFilePath: ({ route, language, environment }) =>
+        `/${environment}/${language}/${route}`,
+      routes: [
+        { route: "about/us", language: "en-us", environment: "production" },
+        {
+          route: "about/us",
+          language: "en-au",
+          environment: "development"
+        }
+      ],
+      renderDirectory
+    }).apply(compiler);
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      expect(
+        memoryFs.existsSync(
+          path.join(renderDirectory, "/production/en-us/about/us/index.html")
+        )
+      ).toBe(true);
+      expect(
+        memoryFs.existsSync(
+          path.join(renderDirectory, "/development/en-au/about/us/index.html")
+        )
+      ).toBe(true);
+      expect(
+        memoryFs.existsSync(path.join(renderDirectory, "/about/us/index.html"))
+      ).toBe(false);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+
+      done();
+    });
+  });
+});
diff --git a/tests/test-cases/multi-compiler-plugin/src/client.js b/tests/test-cases/multi-compiler-plugin/src/client.js
new file mode 100644
index 0000000..30921d2
--- /dev/null
+++ b/tests/test-cases/multi-compiler-plugin/src/client.js
@@ -0,0 +1,4 @@
+module.exports = async () => {
+  const bar = "foo";
+  return bar;
+};
diff --git a/tests/test-cases/multi-compiler-plugin/src/render.js b/tests/test-cases/multi-compiler-plugin/src/render.js
new file mode 100644
index 0000000..7cfcc7f
--- /dev/null
+++ b/tests/test-cases/multi-compiler-plugin/src/render.js
@@ -0,0 +1,8 @@
+export default function exampleRender(...params) {
+  return `<html>
+<body>
+  Rendered with:&nbsp;
+  <code>${JSON.stringify(params, null, 2).replace(/\n/g, "\n  ")}</code>
+</body>
+</html>`;
+}
diff --git a/tests/test-cases/multi-compiler-plugin/webpack.config.js b/tests/test-cases/multi-compiler-plugin/webpack.config.js
new file mode 100644
index 0000000..6227553
--- /dev/null
+++ b/tests/test-cases/multi-compiler-plugin/webpack.config.js
@@ -0,0 +1,32 @@
+const path = require("path");
+
+const srcPath = path.resolve(__dirname, "./src");
+const paths = {
+  renderEntry: path.resolve(srcPath, "render.js"),
+  clientEntry: path.resolve(srcPath, "client.js")
+};
+
+module.exports = [
+  {
+    name: "client",
+    target: "web",
+    mode: "production",
+    entry: paths.clientEntry,
+    output: {
+      filename: "client-[name]-[contenthash].js"
+    }
+  },
+  {
+    dependencies: ["client"],
+    name: "render",
+    target: "node",
+    mode: "production",
+    entry: paths.renderEntry,
+    output: {
+      libraryExport: "default",
+      library: "static",
+      libraryTarget: "umd2",
+      filename: "render-[name]-[contenthash].js"
+    }
+  }
+];
diff --git a/tests/test-cases/single-config/webpack.config.js b/tests/test-cases/single-config/webpack.config.js
index 7de6f3c..a2cb7eb 100644
--- a/tests/test-cases/single-config/webpack.config.js
+++ b/tests/test-cases/single-config/webpack.config.js
@@ -19,5 +19,5 @@ module.exports = {
     libraryTarget: "umd2",
     filename: "render-[name]-[contenthash].js"
   },
-  plugins: [new HtmlRenderPlugin({ renderDirectory })]
+  plugins: [new HtmlRenderPlugin({ renderDirectory }).render()]
 };
diff --git a/tests/test-cases/watch/watch.test.js b/tests/test-cases/watch/watch.test.js
index 12da9ee..d17d0e2 100644
--- a/tests/test-cases/watch/watch.test.js
+++ b/tests/test-cases/watch/watch.test.js
@@ -3,25 +3,16 @@ const webpack = require("webpack");
 const path = require("path");
 
 const config = require("./webpack.config");
-const HtmlRenderPlugin = require("../../../src");
 const getDirContentsSync = require("../../utils/getDirContentsSync");
 
 describe("Watch", () => {
   const renderDirectory = path.join(process.cwd(), "dist", "render");
-
   it("should render a HTML on initial watch build", async done => {
     const compiler = webpack(config);
 
     const memoryFs = new MemoryFS();
     compiler.outputFileSystem = memoryFs;
 
-    compiler.apply(
-      new HtmlRenderPlugin({
-        routes: [{ route: "/a/", extra: "a" }, { route: "/b/", extra: "b" }],
-        renderDirectory
-      })
-    );
-
     const watching = compiler.watch({}, error => {
       watching.close();
       expect(error).toBe(null);
diff --git a/tests/test-cases/watch/webpack.config.js b/tests/test-cases/watch/webpack.config.js
index 6227553..9f43d2a 100644
--- a/tests/test-cases/watch/webpack.config.js
+++ b/tests/test-cases/watch/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require("path");
+const HtmlRenderPlugin = require("../../../src");
 
 const srcPath = path.resolve(__dirname, "./src");
 const paths = {
@@ -6,6 +7,12 @@ const paths = {
   clientEntry: path.resolve(srcPath, "client.js")
 };
 
+const renderDirectory = path.join(process.cwd(), "dist", "render");
+const plugin = new HtmlRenderPlugin({
+  routes: [{ route: "/a/", extra: "a" }, { route: "/b/", extra: "b" }],
+  renderDirectory
+});
+
 module.exports = [
   {
     name: "client",
@@ -14,7 +21,8 @@ module.exports = [
     entry: paths.clientEntry,
     output: {
       filename: "client-[name]-[contenthash].js"
-    }
+    },
+    plugins: [plugin]
   },
   {
     dependencies: ["client"],
@@ -27,6 +35,7 @@ module.exports = [
       library: "static",
       libraryTarget: "umd2",
       filename: "render-[name]-[contenthash].js"
-    }
+    },
+    plugins: [plugin.render()]
   }
 ];
diff --git a/tests/test-cases/webpack-stats/__snapshots__/webpack-stats.test.js.snap b/tests/test-cases/webpack-stats/__snapshots__/webpack-stats.test.js.snap
index 5ce49d2..f557d23 100644
--- a/tests/test-cases/webpack-stats/__snapshots__/webpack-stats.test.js.snap
+++ b/tests/test-cases/webpack-stats/__snapshots__/webpack-stats.test.js.snap
@@ -12,7 +12,7 @@ Object {
   {
     \\"name\\": \\"render\\",
     \\"assets\\": {
-      \\"main\\": \\"render-main-e1ab80f2a54520bc3ec7.js\\"
+      \\"main\\": \\"render-main-92cbd4560ebd5729284e.js\\"
     }
   }
 ]",
diff --git a/tests/test-cases/webpack-stats/src/render.js b/tests/test-cases/webpack-stats/src/render.js
index 5100d98..06f8a8b 100644
--- a/tests/test-cases/webpack-stats/src/render.js
+++ b/tests/test-cases/webpack-stats/src/render.js
@@ -1,5 +1,5 @@
 export default function exampleRender({ webpackStats }) {
-  const stats = webpackStats.toJson();
+  const stats = webpackStats.toJson({});
   return JSON.stringify(
     stats.children.map(childStats => ({
       name: childStats.name,
diff --git a/tests/test-cases/webpack-stats/webpack-stats.test.js b/tests/test-cases/webpack-stats/webpack-stats.test.js
index d4af7ad..34214aa 100644
--- a/tests/test-cases/webpack-stats/webpack-stats.test.js
+++ b/tests/test-cases/webpack-stats/webpack-stats.test.js
@@ -3,7 +3,6 @@ const webpack = require("webpack");
 const path = require("path");
 
 const config = require("./webpack.config");
-const HtmlRenderPlugin = require("../../../src");
 const getDirContentsSync = require("../../utils/getDirContentsSync");
 
 describe("Render WebpackStats", () => {
@@ -15,15 +14,6 @@ describe("Render WebpackStats", () => {
     const memoryFs = new MemoryFS();
     compiler.outputFileSystem = memoryFs;
 
-    compiler.apply(
-      new HtmlRenderPlugin({
-        renderDirectory,
-        mapStatsToParams: ({ webpackStats }) => ({
-          webpackStats
-        })
-      })
-    );
-
     compiler.run(error => {
       if (error) {
         throw error;
diff --git a/tests/test-cases/webpack-stats/webpack.config.js b/tests/test-cases/webpack-stats/webpack.config.js
index 6227553..fb37806 100644
--- a/tests/test-cases/webpack-stats/webpack.config.js
+++ b/tests/test-cases/webpack-stats/webpack.config.js
@@ -1,10 +1,19 @@
 const path = require("path");
+const HtmlRenderPlugin = require("../../../src");
 
 const srcPath = path.resolve(__dirname, "./src");
 const paths = {
   renderEntry: path.resolve(srcPath, "render.js"),
   clientEntry: path.resolve(srcPath, "client.js")
 };
+const renderDirectory = path.join(process.cwd(), "dist", "render");
+
+const plugin = new HtmlRenderPlugin({
+  renderDirectory,
+  mapStatsToParams: ({ webpackStats }) => ({
+    webpackStats
+  })
+});
 
 module.exports = [
   {
@@ -14,10 +23,10 @@ module.exports = [
     entry: paths.clientEntry,
     output: {
       filename: "client-[name]-[contenthash].js"
-    }
+    },
+    plugins: [plugin]
   },
   {
-    dependencies: ["client"],
     name: "render",
     target: "node",
     mode: "production",
@@ -27,6 +36,7 @@ module.exports = [
       library: "static",
       libraryTarget: "umd2",
       filename: "render-[name]-[contenthash].js"
-    }
+    },
+    plugins: [plugin.render()]
   }
 ];
diff --git a/yarn.lock b/yarn.lock
index 44a997f..5733fe0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3078,9 +3078,9 @@ hash-base@^3.0.0:
     safe-buffer "^5.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
-  integrity sha512-eWI5HG9Np+eHV1KQhisXWwM+4EPPYe5dFX1UZZH7k/E3JzDEazVH+VGlZi6R94ZqImq+A3D1mCEtrFIfg/E7sA==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
@@ -5637,9 +5637,9 @@ pacote@^8.1.6:
     which "^1.3.0"
 
 pako@~1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
-  integrity sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.7.tgz#2473439021b57f1516c82f58be7275ad8ef1bb27"
+  integrity sha512-3HNK5tW4x8o5mO8RuHZp3Ydw9icZXx0RANAOMzlMzx7LVXhMJ4mo3MOBpzyd7r/+RUu8BmndP47LXT+vzjtWcQ==
 
 parallel-transform@^1.1.0:
   version "1.1.0"
@@ -6542,7 +6542,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-semantic-release@^15.12.1:
+semantic-release@15.12.1:
   version "15.12.1"
   resolved "https://registry.yarnpkg.com/semantic-release/-/semantic-release-15.12.1.tgz#48939aaf8fd623769003f6bd76fdb974e24785b7"
   integrity sha512-HySTv+k3gKHM7/LWluz/2nZbDRI5zZpsOQ+GTVPLVepRMm5SdWzi4L+I7z5wBwN/JNSPHU7UF4CDSFeGYK1/Mg==
@@ -7029,10 +7029,10 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string_decoder@^1.0.0, string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+string_decoder@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
+  integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
   dependencies:
     safe-buffer "~5.1.0"
 
@@ -7041,6 +7041,13 @@ string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 stringify-package@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.0.tgz#e02828089333d7d45cd8c287c30aa9a13375081b"
@@ -7608,6 +7615,13 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-merge@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.5.tgz#2be31e846c20767d1bef56bdca64c328a681190a"
+  integrity sha512-sVcM+MMJv6DO0C0GLLltx8mUlGMKXE0zBsuMqZ9jz2X9gsekALw6Rs0cAfTWc97VuWS6NpVUa78959zANnMMLQ==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
@@ -7616,10 +7630,10 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.26.0:
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.26.0.tgz#adbe80b869148c8d108b7d88965d00d72b3178de"
-  integrity sha512-J/dP9SJIc5OtX2FZ/+U9ikQtd6H6Mcbqt0xeXtmPwYGDKf8nkbOQQA9KL2Y0rJOsN1Al9Pdn+/j63X58ub8gvQ==
+webpack@^4.28.2:
+  version "4.28.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.28.2.tgz#6b534a8bc91a45787ed631dc2e87aec94e9e4db7"
+  integrity sha512-PK3uVg3/NuNVOjPfYleFI6JF7khO7c2kIlksH7mivQm+QDcwiqV1x6+q89dDeOioh5FNxJHr3LKbDu3oSAhl9g==
   dependencies:
     "@webassemblyjs/ast" "1.7.11"
     "@webassemblyjs/helper-module-context" "1.7.11"