Update plugin order

Author: CLTPayne

packages/dotcom-page-kit-cli/README.md

@@ -37,6 +37,8 @@ page-kit --help
 
 This action can be used to assemble the static assets for your application using Webpack. By default this action includes only a barebones Webpack configuration to bundle JavaScript source code but this can be extended via plugins to add additional functionality.
 
+The action also creates a `manifest.json` (the file name is default but can be [configured](#Manifest-file-name)). It includes the hashed output names for the generated `.js` and `.css` chunks
+
 #### Options
 
 ##### Entry points
@@ -93,7 +95,7 @@ Files will be created using the pattern `[name].js` in development mode and `[na
 
 ##### Manifest file name
 
-The name of the generated manifest file can be changed via the configuration file. The default file name is `"manifest.json"`.
+The generated manifest file details the hashed output names for the emitted `.js` and `.css` chunks. The file name can be changed via the configuration file. The default file name is `"manifest.json"`.
 
 Usage via configuration file:
 
@@ -161,14 +163,22 @@ import { hooks } from '@financial-times/dotcom-page-kit-cli'
 
 _Please note: The hooks below are listed in the order they will be executed._
 
-##### `WEBPACK_MANIFEST_PLUGIN_OPTIONS`
-
-Configuration options for the [assets manifest plugin](https://github.com/webdeveric/webpack-assets-manifest).
-
 ##### `WEBPACK_CLEAN_PLUGIN_OPTIONS`
 
 Configuration options for the [clean plugin](https://github.com/johnagan/clean-webpack-plugin).
 
+##### `WEBPACK_COMPRESSION_PLUGIN_OPTIONS`
+
+Configuration options for the [compression plugin](https://github.com/webpack-contrib/compression-webpack-plugin)
+
+##### `WEBPACK_BROTLI_PLUGIN_OPTIONS`
+
+Configuration options for the [brotli compression plugin](https://github.com/mynameiswhm/brotli-webpack-plugin)
+
+##### `WEBPACK_MANIFEST_PLUGIN_OPTIONS`
+
+Configuration options for the [assets manifest plugin](https://github.com/webdeveric/webpack-assets-manifest) which provides the compilation entrypoints for each bundle by asset type e.g. `scripts` and `styles`.
+
 ##### `BABEL_CONFIG`
 
 Configuration options for [Babel](https://babeljs.io/docs/en/options).
@@ -183,14 +193,6 @@ The Webpack [rule] for handling JavaScript files.
 
 [rule]: https://webpack.js.org/configuration/module/#rule
 
-##### `WEBPACK_COMPRESSION_PLUGIN_OPTIONS`
-
-Configuration options for the [compression plugin](https://github.com/webpack-contrib/compression-webpack-plugin)
-
-##### `WEBPACK_BROTLI_PLUGIN_OPTIONS`
-
-Configuration options for the [brotli compression plugin](https://github.com/mynameiswhm/brotli-webpack-plugin)
-
 ##### `WEBPACK_CONFIG`
 
 The complete Webpack configuration object.

packages/dotcom-page-kit-cli/src/operations/getWebpackConfig.ts

@@ -2,18 +2,16 @@ import get from 'lodash.get'
 import { hooks } from '../entities/hooks'
 import { CliContext } from '../entities/CliContext'
 import { getBabelConfig } from './getBabelConfig'
-import ManifestPlugin from 'webpack-assets-manifest'
 import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import CompressionPlugin from 'compression-webpack-plugin'
 import BrotliPlugin from 'brotli-webpack-plugin'
+import ManifestPlugin from 'webpack-assets-manifest'
 
 export function getWebpackConfig({ options, config, publish, cli }: CliContext) {
   const isDevMode = options.development
   const entryOptions = get(config, 'settings.build.entry') || options.entryFile
   const outputPath = get(config, 'settings.build.outputPath') || options.outputPath
   const outputFileName = isDevMode ? '[name].bundle.js' : '[name].[contenthash:12].bundle.js'
-  const manifestFileName = get(config, 'settings.build.manifestFileName') || 'manifest.json'
-  const manifestPluginOptions = { output: manifestFileName, entrypoints: true }
   const cleanWebpackPluginOptions = { verbose: false }
   const compressionPluginOptions = {
     test: /\.(js|css)$/,
@@ -22,11 +20,16 @@ export function getWebpackConfig({ options, config, publish, cli }: CliContext)
     minRatio: 1
   }
   const brotliPluginOptions = { test: /\.(js|css)$/, quality: 11, minRatio: 1 }
+  const manifestFileName = get(config, 'settings.build.manifestFileName') || 'manifest.json'
+  const manifestPluginOptions = {
+    output: manifestFileName,
+    entrypoints: true
+  }
 
-  publish(hooks.WEBPACK_MANIFEST_PLUGIN_OPTIONS, manifestPluginOptions)
   publish(hooks.WEBPACK_CLEAN_PLUGIN_OPTIONS, cleanWebpackPluginOptions)
   publish(hooks.WEBPACK_COMPRESSION_PLUGIN_OPTIONS, compressionPluginOptions)
   publish(hooks.WEBPACK_BROTLI_PLUGIN_OPTIONS, brotliPluginOptions)
+  publish(hooks.WEBPACK_MANIFEST_PLUGIN_OPTIONS, manifestPluginOptions)
 
   return publish(hooks.WEBPACK_CONFIG, {
     mode: isDevMode ? 'development' : 'production',
@@ -57,11 +60,11 @@ export function getWebpackConfig({ options, config, publish, cli }: CliContext)
       ? [new CleanWebpackPlugin(cleanWebpackPluginOptions), new ManifestPlugin(manifestPluginOptions)]
       : [
           new CleanWebpackPlugin(cleanWebpackPluginOptions),
-          new ManifestPlugin(manifestPluginOptions),
           new CompressionPlugin(compressionPluginOptions),
           // TODO: Swap BrotliPlugin for another instance of CompressionPlugin when on node >=11.7.0
           // https://www.npmjs.com/package/compression-webpack-plugin#using-brotli
-          new BrotliPlugin(brotliPluginOptions)
+          new BrotliPlugin(brotliPluginOptions),
+          new ManifestPlugin(manifestPluginOptions)
         ],
     devtool: isDevMode ? 'cheap-module-eval-source-map' : 'source-map',
     bail: isDevMode ? false : true