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

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

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

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

caniuse-lite 和 Can 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