From be35bb58af4422531046e0da9419aa9fb9a6244e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Max=20=F0=9F=95=BA=20Coplan?= <max.coplan@bytedance.com>
Date: Wed, 7 May 2025 13:12:00 -0700
Subject: [PATCH] chore(create-rspack): better default browserslist target

Summary: The current browserslist default has two problems
1. It only covers [31% of users](https://browsersl.ist/#q=chrome+%3E%3D+87%2C+edge+%3E%3D+88%2C+firefox+%3E%3D+78%2C+safari+%3E%3D+14)
2. The versions are hardcoded, so needs to be manually updated

This commit changes the default browserslist to dynamically update as browser usage changes, and moves coverage from 31% to [91%](https://browsersl.ist/#q=last+2+versions%2C+Firefox+ESR%2C+%3E+0.2%25%2C+not+dead)
---
 packages/create-rspack/template-react-js/rspack.config.mjs   | 2 +-
 packages/create-rspack/template-react-ts/rspack.config.ts    | 2 +-
 packages/create-rspack/template-vanilla-js/rspack.config.mjs | 2 +-
 packages/create-rspack/template-vanilla-ts/rspack.config.ts  | 2 +-
 packages/create-rspack/template-vue-js/rspack.config.mjs     | 2 +-
 packages/create-rspack/template-vue-ts/rspack.config.ts      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/create-rspack/template-react-js/rspack.config.mjs b/packages/create-rspack/template-react-js/rspack.config.mjs
index 3d1a28578818..870e364d7f6e 100644
--- a/packages/create-rspack/template-react-js/rspack.config.mjs
+++ b/packages/create-rspack/template-react-js/rspack.config.mjs
@@ -8,7 +8,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const isDev = process.env.NODE_ENV === "development";
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+const targets = ["last 2 versions", "> 0.2%",  "not dead",  "Firefox ESR"];
 
 export default defineConfig({
 	context: __dirname,
diff --git a/packages/create-rspack/template-react-ts/rspack.config.ts b/packages/create-rspack/template-react-ts/rspack.config.ts
index c420bf754e22..14b29a09c2c3 100644
--- a/packages/create-rspack/template-react-ts/rspack.config.ts
+++ b/packages/create-rspack/template-react-ts/rspack.config.ts
@@ -5,7 +5,7 @@ import * as RefreshPlugin from "@rspack/plugin-react-refresh";
 const isDev = process.env.NODE_ENV === "development";
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+const targets = ["last 2 versions", "> 0.2%",  "not dead",  "Firefox ESR"];
 
 export default defineConfig({
 	context: __dirname,
diff --git a/packages/create-rspack/template-vanilla-js/rspack.config.mjs b/packages/create-rspack/template-vanilla-js/rspack.config.mjs
index 102bcf8452aa..b67ec970600c 100644
--- a/packages/create-rspack/template-vanilla-js/rspack.config.mjs
+++ b/packages/create-rspack/template-vanilla-js/rspack.config.mjs
@@ -2,7 +2,7 @@ import { defineConfig } from "@rspack/cli";
 import { rspack } from "@rspack/core";
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+const targets = ["last 2 versions", "> 0.2%",  "not dead",  "Firefox ESR"];
 
 export default defineConfig({
 	entry: {
diff --git a/packages/create-rspack/template-vanilla-ts/rspack.config.ts b/packages/create-rspack/template-vanilla-ts/rspack.config.ts
index b10431b60e14..e7ad0818b86c 100644
--- a/packages/create-rspack/template-vanilla-ts/rspack.config.ts
+++ b/packages/create-rspack/template-vanilla-ts/rspack.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from "@rspack/cli";
 import { rspack } from "@rspack/core";
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+const targets = ["last 2 versions", "> 0.2%",  "not dead",  "Firefox ESR"];
 
 export default defineConfig({
 	entry: {
diff --git a/packages/create-rspack/template-vue-js/rspack.config.mjs b/packages/create-rspack/template-vue-js/rspack.config.mjs
index 062b62288521..e0498e80b856 100644
--- a/packages/create-rspack/template-vue-js/rspack.config.mjs
+++ b/packages/create-rspack/template-vue-js/rspack.config.mjs
@@ -7,7 +7,7 @@ import { VueLoaderPlugin } from "vue-loader";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+const targets = ["last 2 versions", "> 0.2%",  "not dead",  "Firefox ESR"];
 
 export default defineConfig({
 	context: __dirname,
diff --git a/packages/create-rspack/template-vue-ts/rspack.config.ts b/packages/create-rspack/template-vue-ts/rspack.config.ts
index d1e832b43d89..92b6f2bdd218 100644
--- a/packages/create-rspack/template-vue-ts/rspack.config.ts
+++ b/packages/create-rspack/template-vue-ts/rspack.config.ts
@@ -3,7 +3,7 @@ import { type RspackPluginFunction, rspack } from "@rspack/core";
 import { VueLoaderPlugin } from "vue-loader";
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+const targets = ["last 2 versions", "> 0.2%",  "not dead",  "Firefox ESR"];
 
 export default defineConfig({
 	context: __dirname,