webpack如何设置兼容浏览器的范围browserslist

Browserslist 是前端工程化不可或缺的工具,无论是处理 js 的 babel 还是处理 css 的 postcss,他们背后都有Browserslist 的身影。

一、如何查看查看所有浏览器和它的市场占有率

我们如何知道现在的浏览器那些被废弃、那些市场占有率高,可以通过下面两个网站提供的数据支撑,Browserslist 也是依据此数据。

caniuse-liteCan I Use

二、如何配置browserslist

使用/常用配置

> 5%: 在全球用户份额大于 5% 的浏览器

last 2 versions: 所有浏览器的最新两个版本

last 2 Chrome versions: Chrome 浏览器的最新两个版本

dead: 官方不在维护已过两年,比如 IE10

not dead: 官方还在维护的

更多配置可在官方文档查看https://browsersl.ist/

我们可以在package.json配置或者单独新建一个.browserslistrc的配置文件

package.json
复制代码
"browserslist": ["last 2 version", "> 1%", "not dead"]
.browserslistrc文件
复制代码
>1%
last 2 versions
not dead

配置完成子后控制台运行,就能查看筛选的浏览器

复制代码
npx browserslist
相关推荐
发现一只大呆瓜8 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
m0_719084119 小时前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录10 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n10 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n10 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
狗哥哥10 小时前
微前端路由设计方案 & 子应用管理保活
前端·架构
前端大卫11 小时前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘11 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare11 小时前
浅浅看一下设计模式
前端
Lee川11 小时前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试