mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
ec077c6191
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
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
/**
|
|
* @fileoverview This file contains a set of webpack configurations that should
|
|
* be shared between development and production.
|
|
*/
|
|
|
|
import * as path from "path"
|
|
import { Configuration } from "webpack"
|
|
import HtmlWebpackPlugin from "html-webpack-plugin"
|
|
|
|
const templatePath = path.join(__dirname, "html_templates")
|
|
|
|
const plugins = [
|
|
// The HTML webpack plugin tells webpack to use our `index.html` and inject
|
|
// the bundle script, which might have special naming.
|
|
new HtmlWebpackPlugin({
|
|
template: path.join(templatePath, "index.html"),
|
|
publicPath: "/",
|
|
}),
|
|
]
|
|
|
|
export const commonWebpackConfig: Configuration = {
|
|
// entry defines each "page" or "chunk". Currently, for v2, we only have one bundle -
|
|
// a bundle that is shared across all of the UI. However, we may need to eventually split
|
|
// like in v1, where there is a separate entry piont for dashboard & terminal.
|
|
entry: path.join(__dirname, "Main.tsx"),
|
|
|
|
// modules specify how different modules are loaded
|
|
// See: https://webpack.js.org/concepts/modules/
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.tsx?$/,
|
|
use: ["ts-loader"],
|
|
exclude: [/node_modules/],
|
|
},
|
|
],
|
|
},
|
|
|
|
resolve: {
|
|
// Let webpack know to consider ts/tsx files for bundling
|
|
// See: https://webpack.js.org/guides/typescript/
|
|
extensions: [".tsx", ".ts", ".js"],
|
|
},
|
|
|
|
// output defines the name and location of the final bundle
|
|
output: {
|
|
// The chunk name along with a hash of its content will be used for the
|
|
// generated bundle name.
|
|
//
|
|
// REMARK: It's important to use [contenthash] here to invalidate caches.
|
|
filename: "bundle.[contenthash].js",
|
|
path: path.resolve(__dirname, "out"),
|
|
},
|
|
|
|
plugins: plugins,
|
|
|
|
target: "web",
|
|
}
|