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
相关推荐
bsr198310 分钟前
前端路由的hash模式和history模式
前端·history·hash·路由模式
杨过姑父37 分钟前
ES6 简单练习笔记--变量申明
前端·笔记·es6
真想骂*1 小时前
Node.js日志记录新篇章:morgan中间件的使用与优势
中间件·node.js
Sunny_lxm1 小时前
<keep-alive> <component ></component> </keep-alive>缓存的组件实现组件,实现组件切换时每次都执行指定方法
前端·缓存·component·active
咔咔库奇2 小时前
【TypeScript】命名空间、模块、声明文件
前端·javascript·typescript
兩尛2 小时前
订单状态定时处理、来单提醒和客户催单(day10)
java·前端·数据库
又迷茫了2 小时前
vue + element-ui 组件样式缺失导致没有效果
前端·javascript·vue.js
哇哦Q3 小时前
原生HTML集合
前端·javascript·html
SoWhat~3 小时前
随遇随记篇
前端·javascript
孟健3 小时前
重磅首发:国产AI编程助手Trae实测!免费用上Claude是什么体验?
前端·aigc·visual studio code