refactor: Migrate from Next.js to pure webpack config (#360)

Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle

- [x] Switch from `next/link` to `react-router-dom`'s link 

> This part was easy - just change the import to `import { Link } from "react-router-dom"` and `<Link href={...} />` to `<Link to={...} />`

- [x] Switch from `next/router` to `react-router-dom`'s paradigms (`useNavigation`, `useLocation`, and `useParams`)

> `router.push` can be converted to `navigate(...)` (provided by the `useNavigate` hook)
> `router.replace` can be converted `navigate(..., {replace: true})` 
>  Query parameters (`const { query } = useRouter`) can be converted to `const query = useParams()`)

- [x] Implement client-side routing with `react-router-dom`

> Parameterized routes in NextJS like `projects/[organization]/[project]` would look like:
> ```
>               <Route path="projects">
>                    <Route path=":organization/:project">
>                    <Route index element={<ProjectPage />} />
>                  </Route>
>               </Route>
> ```

I've hooked up a `build:analyze` command that spins up a server to show the bundle size:
<img width="1303" alt="image" src="https://user-images.githubusercontent.com/88213859/157496889-87c5fdcd-fad1-4f2e-b7b6-437aebf99641.png">

The bundle looks OK, but there are some opportunities for improvement - the heavy-weight dependencies, like React, ReactDOM, Material-UI, and lodash could be brought in via a CDN: https://stackoverflow.com/questions/50645796/how-to-import-reactjs-material-ui-using-a-cdn-through-webpacks-externals

site/webpack.dev.ts

@@ -0,0 +1,91 @@
+/**
+ * @fileoverview This file contains a development configuration for webpack
+ * meant for webpack-dev-server.
+ */
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
+import { Configuration } from "webpack"
+import "webpack-dev-server"
+
+import { commonWebpackConfig } from "./webpack.common"
+
+const commonPlugins = commonWebpackConfig.plugins || []
+
+const config: Configuration = {
+  ...commonWebpackConfig,
+
+  // devtool controls how source maps are generated. In development, we want
+  // more details (less optimized) for more readability and an easier time
+  // debugging
+  devtool: "eval-source-map",
+
+  // devServer is the configuration for webpack-dev-server.
+  //
+  // REMARK: needs webpack-dev-server import at top of file for typings
+  devServer: {
+    // allowedHosts are services that can access the running server.
+    // Setting allowedHosts sets up the development server to spend specific headers to allow cross-origin requests.
+    // In v1, we use CODERD_HOST for the allowed host and origin in order to mitigate security risks.
+    // We don't have an equivalent in v2 - but we can allow localhost and cdr.dev,
+    // so that the site is accessible through dev urls.
+    // We don't want to use 'all' or '*' and risk a security hole in our dev environments.
+    allowedHosts: ["localhost", ".cdr.dev"],
+
+    // client configures options that are observed in the browser/web-client.
+    client: {
+      // automatically sets the browser console to verbose when using HMR
+      logging: "verbose",
+
+      // errors will display as a full-screen overlay
+      overlay: true,
+
+      // build % progress will display in the browser
+      progress: true,
+
+      // webpack-dev-server uses a webSocket to communicate with the browser
+      // for HMR. By setting this to auto://0.0.0.0/ws, we allow the browser
+      // to set the protocal, hostname and port automatically for us.
+      webSocketURL: "auto://0.0.0.0:0/ws",
+    },
+    devMiddleware: {
+      publicPath: "/",
+    },
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+
+    // historyApiFallback is required when using history (react-router) for
+    // properly serving index.html on 404s.
+    historyApiFallback: true,
+    hot: true,
+    port: 8080,
+    proxy: {
+      "/api": "http://localhost:3000",
+    },
+    static: ["./static"],
+  },
+
+  // Development mode - see:
+  // https://webpack.js.org/configuration/mode/#mode-development
+  mode: "development",
+
+  output: {
+    ...commonWebpackConfig.output,
+
+    // The chunk name will be used as-is for the bundle output
+    // This is simpler than production, to improve performance
+    // (no need to calculate hashes in development)
+    filename: "[name].js",
+  },
+
+  plugins: [
+    ...commonPlugins,
+
+    // The ReactRefreshWebpackPlugin enables hot-module reloading:
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin
+    new ReactRefreshWebpackPlugin({
+      overlay: true,
+    }),
+  ],
+}
+
+export default config