Add docs concerning webpack external configs (#5351)

docs/extensions/get-started/anatomy.md

@@ -43,6 +43,8 @@ Lens uses this ID to uniquely identify your extension.
 - `main`: the extension's entry point run in `main` process.
 - `renderer`: the extension's entry point run in `renderer` process.
 - `engines.lens`: the minimum version of Lens API that the extension depends upon.
+  We only support the `^` range, which is also optional to specify, and only major and minor version numbers.
+  Meaning that `^5.4` and `5.4` both mean the same thing, and the patch version in `5.4.2` is ignored.
 
 ```javascript
 {
@@ -53,7 +55,8 @@ Lens uses this ID to uniquely identify your extension.
   "license": "MIT",
   "homepage": "https://github.com/lensapp/lens-extension-samples",
   "engines": {
-    "lens": "^4.0.0"
+    "node": "^14.18.12",
+    "lens": "5.4"
   },
   "main": "dist/main.js",
   "renderer": "dist/renderer.js",
@@ -65,17 +68,51 @@ Lens uses this ID to uniquely identify your extension.
     "react-open-doodles": "^1.0.5"
   },
   "devDependencies": {
-    "@k8slens/extensions": "^4.0.0-alpha.2",
+    "@k8slens/extensions": "^5.4.6",
     "ts-loader": "^8.0.4",
-    "typescript": "^4.0.3",
+    "typescript": "^4.5.5",
-    "@types/react": "^16.9.35",
+    "@types/react": "^17.0.44",
-    "@types/node": "^12.0.0",
+    "@types/node": "^14.18.12",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.11"
   }
 }
 ```
 
+## Webpack configuation
+
+The following webpack `externals` are provided by `Lens` and must be used (when available) to make sure that the versions used are in sync.
+
+| Package            | webpack external syntax     | Lens versions | Available in Main | Available in Renderer |
+| ------------------ | --------------------------- | ------------- | ----------------- | --------------------- |
+| `mobx`             | `var global.Mobx`           | `>5.0.0`      | ✅                | ✅                    |
+| `mobx-react`       | `var global.MobxReact`      | `>5.0.0`      | ❌                | ✅                    |
+| `react`            | `var global.React`          | `>5.0.0`      | ❌                | ✅                    |
+| `react-router`     | `var global.ReactRouter`    | `>5.0.0`      | ❌                | ✅                    |
+| `react-router-dom` | `var global.ReactRouterDom` | `>5.0.0`      | ❌                | ✅                    |
+| `react-dom`        | `var global.ReactDOM`       | `>5.5.0`      | ❌                | ✅                    |
+
+What is exported is the whole of the packages as a `*` import (within typescript).
+
+For example, the following is how you would specify these within your webpack configuration files.
+
+```json
+{
+  ...
+  "externals": [
+    ...
+    {
+      "mobx": "var global.Mobx"
+      "mobx-react": "var global.MobxReact"
+      "react": "var global.React"
+      "react-router": "var global.ReactRouter"
+      "react-router-dom": "var global.ReactRouterDom"
+      "react-dom": "var global.ReactDOM"
+    }
+  ]
+}
+```
+
 ## Extension Entry Files
 
 Lens extensions can have two separate entry files.
@@ -97,8 +134,8 @@ These React components are defined in the additional `./src/page.tsx` file.
 
 ```typescript
 import { Renderer } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./page"
+import { ExampleIcon, ExamplePage } from "./page";
-import React from "react"
+import React from "react";
 
 export default class ExampleExtension extends Renderer.LensExtension {
   clusterPages = [
@@ -106,9 +143,9 @@ export default class ExampleExtension extends Renderer.LensExtension {
       id: "extension-example",
       components: {
         Page: () => <ExamplePage extension={this} />,
-      }
+      },
-    }
+    },
-  ]
+  ];
 }
 ```