Remove Webpack and speed up web builds (#3218)

AndreasArvidsson · web-flow · commit dda35a47fab7 · 2026-03-13T15:34:32.000+01:00
Use Vite and turbopack instead of webpack
diff --git a/eslint.config.mts b/eslint.config.mts
@@ -138,6 +138,7 @@ const disabledTypeCheckConfig: ConfigWithExtends = {
     "**/docusaurus.config.mts",
     "**/mdx-components.tsx",
     "**/eslintConfig.ts",
+    "**/vite.config.ts",
     "eslint.config.mts",
     "prettier.config.cjs",
     "typings/**",
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "lint:ts": "eslint packages",
     "lint:prettier": "prettier --check .",
     "lint": "pnpm run lint:meta && pnpm run lint:syncpack && pnpm run lint:ts",
-    "init-vscode-sandbox": "pnpm -F=@cursorless/cursorless-vscode init-launch-sandbox",
+    "init-vscode-sandbox": "pnpm -F @cursorless/cursorless-vscode init-launch-sandbox",
     "meta-updater": "env NODE_OPTIONS='--import=tsx --conditions=cursorless:bundler' meta-updater",
     "preinstall": "npx only-allow pnpm",
     "test-compile": "tsc --build",
diff --git a/packages/cheatsheet-local/index.html b/packages/cheatsheet-local/index.html
@@ -5,13 +5,14 @@
     <title>Cursorless Cheatsheet</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="./src/favicon.ico" />
     <script id="cheatsheet-data">
       // Dummy data for use in debugging
-      document.cheatsheetInfo = <%= fakeCheatsheetInfo %>;
+      document.cheatsheetInfo = __FAKE_CHEATSHEET_INFO__;
     </script>
   </head>
-  <body class="<%= bodyClasses %>">
+  <body class="__BODY_CLASSES__">
     <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>
diff --git a/packages/cheatsheet-local/package.json b/packages/cheatsheet-local/package.json
@@ -22,38 +22,30 @@
     "compile": "tsc --build",
     "watch": "tsc --build --watch",
     "build": "pnpm build:prod",
-    "build:dev": "pnpm webpack --mode=development",
-    "build:prod": "pnpm webpack --mode=production --node-env=production",
-    "webpack": "env NODE_OPTIONS=--loader=ts-node/esm webpack --config ./src/webpack.config.ts",
+    "build:dev": "vite build --mode development",
+    "build:prod": "vite build --mode production",
     "clean": "rm -rf ./out tsconfig.tsbuildinfo ./dist ./build"
   },
   "dependencies": {
     "@cursorless/cheatsheet": "workspace:*",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@effortlessmotion/html-webpack-inline-source-plugin": "^1.0.3",
     "@tailwindcss/postcss": "^4.2.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/webpack": "^5.28.5",
-    "css-loader": "^7.1.4",
-    "html-webpack-plugin": "^5.6.6",
+    "@vitejs/plugin-react": "^5.1.0",
     "jest": "^30.2.0",
     "postcss": "^8.5.8",
-    "postcss-loader": "^8.2.1",
-    "style-loader": "^4.0.0",
     "tailwindcss": "^4.2.1",
-    "ts-loader": "^9.5.4",
-    "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.3"
+    "vite": "^7.1.7",
+    "vite-plugin-singlefile": "^2.3.0"
   }
 }
diff --git a/packages/cheatsheet-local/src/styles.css b/packages/cheatsheet-local/src/styles.css
@@ -1,3 +1,3 @@
 @import "tailwindcss";
 
-@config "../tailwind.config.js";
+@config "../tailwind.config.mjs";
diff --git a/packages/cheatsheet-local/src/webpack.config.ts b/packages/cheatsheet-local/src/webpack.config.ts
diff --git a/packages/cheatsheet-local/tailwind.config.mjs b/packages/cheatsheet-local/tailwind.config.mjs
diff --git a/packages/cheatsheet-local/vite.config.ts b/packages/cheatsheet-local/vite.config.ts
@@ -0,0 +1,37 @@
+import {
+  cheatsheetBodyClasses,
+  fakeCheatsheetInfo,
+} from "@cursorless/cheatsheet";
+import react from "@vitejs/plugin-react";
+import { defineConfig, type PluginOption } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+
+export default defineConfig(() => {
+  return {
+    build: {
+      outDir: "dist",
+
+      rollupOptions: {
+        input: {
+          index: "./index.html",
+        },
+      },
+    },
+
+    plugins: [react(), viteSingleFile(), injectCheatsheetTemplateData()],
+  };
+});
+
+function injectCheatsheetTemplateData(): PluginOption {
+  return {
+    name: "inject-cheatsheet-template-data",
+    transformIndexHtml(html) {
+      return html
+        .replaceAll("__BODY_CLASSES__", cheatsheetBodyClasses)
+        .replaceAll(
+          "__FAKE_CHEATSHEET_INFO__",
+          JSON.stringify(fakeCheatsheetInfo),
+        );
+    },
+  };
+}
diff --git a/packages/cursorless-org-docs/docusaurus.config.mts b/packages/cursorless-org-docs/docusaurus.config.mts
@@ -87,6 +87,17 @@ const config: Config = {
   tagline: "Structural voice coding at the speed of thought",
   url: "https://www.cursorless.org",
   baseUrl: "/docs/",
+  onBrokenLinks: "throw",
+  onBrokenAnchors: "throw",
+  trailingSlash: true,
+
+  future: {
+    v4: {
+      removeLegacyPostBuildHeadAttribute: true,
+    },
+    experimental_faster: true,
+  },
+
   stylesheets: [
     // Icons generated with https://favicon.io/favicon-generator/
     {
@@ -119,9 +130,6 @@ const config: Config = {
     },
     { rel: "shortcut icon", href: "/favicon.ico?v=1" },
   ],
-  onBrokenLinks: "throw",
-  onBrokenAnchors: "throw",
-  trailingSlash: true,
 
   markdown: {
     hooks: {
@@ -151,6 +159,7 @@ const config: Config = {
       },
     ],
   ],
+
   plugins: [
     "./src/plugins/tailwind-plugin.ts",
     "./src/plugins/scope-tests-plugin.ts",
diff --git a/packages/cursorless-org-docs/package.json b/packages/cursorless-org-docs/package.json
@@ -48,6 +48,7 @@
     "@cursorless/common": "workspace:*",
     "@docsearch/react": "^4.6.0",
     "@docusaurus/core": "^3.9.2",
+    "@docusaurus/faster": "^3.9.2",
     "@docusaurus/preset-classic": "^3.9.2",
     "@docusaurus/theme-classic": "^3.9.2",
     "@docusaurus/theme-common": "^3.9.2",
diff --git a/packages/cursorless-org-docs/src/css/custom.css b/packages/cursorless-org-docs/src/css/custom.css
@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@config "../../tailwind.config.js";
+@config "../../tailwind.config.mjs";
 
 /* From https://github.com/facebook/docusaurus/blob/cc0bceab9c1678303f6237f5526753edc1b12fc3/website/src/css/custom.css#L70-L86 */
 .header-github-link:hover {
diff --git a/packages/cursorless-org-docs/tailwind.config.mjs b/packages/cursorless-org-docs/tailwind.config.mjs
diff --git a/packages/cursorless-org/next.config.js b/packages/cursorless-org/next.config.js
@@ -26,26 +26,13 @@ const references = JSON.parse(
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ["@svgr/webpack"],
-    });
-
-    // Set our custom condition for the bundler so that we directly use
-    // typescript from packages in our monorepo, which makes hot-reloading
-    // smoother. Based on
-    // https://github.com/vercel/next.js/discussions/33813#discussioncomment-7457277
-    config.plugins.push({
-      apply(compiler) {
-        compiler.hooks.afterEnvironment.tap("NextEntryPlugin", () => {
-          compiler.options.resolve.conditionNames.push("cursorless:bundler");
-        });
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
       },
-    });
-
-    return config;
+    },
   },
   experimental: {
     mdxRs: true,
diff --git a/packages/cursorless-org/package.json b/packages/cursorless-org/package.json
@@ -20,7 +20,7 @@
   },
   "scripts": {
     "dev": "next dev",
-    "build": "next build --webpack",
+    "build": "next build",
     "start": "http-server out -a 127.0.0.1 -p 8085",
     "lint": "next lint",
     "compile": "tsc --build",
diff --git a/packages/cursorless-org/src/styles/globals.css b/packages/cursorless-org/src/styles/globals.css
@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@config "../../tailwind.config.js";
+@config "../../tailwind.config.mjs";
 
 :root {
   --safe-area-inset-top: env(safe-area-inset-top);
diff --git a/packages/cursorless-org/tailwind.config.mjs b/packages/cursorless-org/tailwind.config.mjs
diff --git a/packages/cursorless-vscode-tutorial-webview/package.json b/packages/cursorless-vscode-tutorial-webview/package.json
@@ -12,7 +12,7 @@
     "watch:tsc": "pnpm compile:tsc --watch",
     "watch:esbuild": "pnpm build:esbuild --watch",
     "watch:tailwind": "pnpm build:tailwind --watch",
-    "watch": "pnpm run --filter @cursorless/cursorless-vscode-tutorial-webview --parallel '/^watch:.*/'",
+    "watch": "pnpm run -F @cursorless/cursorless-vscode-tutorial-webview --parallel '/^watch:.*/'",
     "build:esbuild": "bash ./compile-esbuild.sh",
     "build:tailwind": "pnpx @tailwindcss/cli -i ./src/index.css -o ./out/index.css",
     "build": "pnpm build:prod",
diff --git a/packages/cursorless-vscode-tutorial-webview/src/index.css b/packages/cursorless-vscode-tutorial-webview/src/index.css
@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@config "../tailwind.config.js";
+@config "../tailwind.config.mjs";
 
 @theme {
   --text-2xs: 0.625rem;
diff --git a/packages/cursorless-vscode-tutorial-webview/tailwind.config.mjs b/packages/cursorless-vscode-tutorial-webview/tailwind.config.mjs
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`@import "tailwindcss";`
`2`	`2`
`3`		`-@config "../tailwind.config.js";`
	`3`	`+@config "../tailwind.config.mjs";`