Webpack 和 Vite 在处理浏览器兼容性方面都有各自的方式，以下是它们常见的一些做法：
Webpack
-
使用 Loader 进行代码转换
- Babel Loader：最常用的是配置 Babel 来将 ES6 + 等新语法转换为低版本浏览器能识别的 ES5 语法。通过预设（presets）和插件（plugins），可以指定需要转换的语法特性以及转换的目标浏览器环境。例如，设置
@babel/preset-env并配置targets选项，就可以根据目标浏览器的版本来决定要转换哪些语法。 - PostCSS Loader：用于处理 CSS 兼容性。它可以使用
autoprefixer插件自动为 CSS 属性添加浏览器厂商前缀，例如将display: flex转换为-webkit-display: flex、-moz-display: flex等，以确保在不同浏览器中正确显示。
- Babel Loader：最常用的是配置 Babel 来将 ES6 + 等新语法转换为低版本浏览器能识别的 ES5 语法。通过预设（presets）和插件（plugins），可以指定需要转换的语法特性以及转换的目标浏览器环境。例如，设置
-
配置目标浏览器：在 Webpack 的配置中，可以通过
browserslist配置项来指定项目支持的浏览器版本范围。browserslist可以在package.json文件中定义，也可以单独创建一个.browserslistrc文件。例如，设置"browserslist": ["last 2 versions", "ie >= 11"]表示支持每个主流浏览器的最新两个版本以及 IE11 及以上版本。这样，Babel 和其他相关工具就会根据这个配置来进行相应的代码转换和处理。 -
使用 Polyfill：对于一些浏览器不支持的原生对象、方法或特性，可以通过引入 Polyfill 来实现兼容。例如，
core-js提供了一系列的 Polyfill，可以用于弥补不同浏览器在 ES6 + 特性上的缺失，像Promise、Array.from等方法在旧浏览器中的实现。可以在项目的入口文件中引入core-js，或者通过 Webpack 的import语句按需引入所需的 Polyfill。
Vite
- 依赖 ESBuild 进行快速转换：Vite 在开发阶段利用 ESBuild 对代码进行快速转换，ESBuild 内置了对一些常见语法转换的支持，能将 ES6 + 语法转换为大多数浏览器都能理解的形式。虽然 ESBuild 的转换功能相对简单，但在开发过程中已经能满足基本的兼容性需求，提供快速的开发体验。
- 基于 Rollup 的插件机制：在构建阶段，Vite 基于 Rollup 进行打包，通过插件机制来处理兼容性问题。例如，可以使用
@rollup/plugin-babel插件来进行更全面的 Babel 转换，类似于 Webpack 中 Babel Loader 的作用，将代码转换为适合目标浏览器的语法。同时，也可以使用rollup-plugin-postcss来处理 CSS 的兼容性，通过autoprefixer添加浏览器厂商前缀。 - 浏览器兼容性配置：Vite 同样可以通过
browserslist配置来指定目标浏览器。在vite.config.js文件中，可以设置build.target选项来指定构建目标，例如build.target: ['es2015', 'ie11']，这会告诉 Vite 在构建时要将代码转换为符合 ES2015 规范以及 IE11 兼容的形式。此外，browserslist的配置也会影响到 CSS 中自动添加前缀的规则以及一些 Polyfill 的引入策略。 - Polyfill 处理：Vite 在处理 Polyfill 时，会根据
browserslist配置和项目中使用的特性来自动注入所需的 Polyfill。例如，如果项目中使用了fetchAPI，而目标浏览器不支持该 API，Vite 会自动引入whatwg-fetch等 Polyfill 来实现兼容。同时，也可以在vite.config.js中通过optimizeDeps.include选项手动指定需要包含的 Polyfill 库，以确保它们在构建过程中被正确处理。
