持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情首先提个问题，如何实现css、js的兼容性，要兼容哪些浏览器平台？

Can i use

我们的项目需要兼容哪些主流浏览器的哪些版本，那么我们怎么知道哪些版本是主流的呢？这里就推荐一个网站。官网地址🌏

打开Browser Usage table 如下就是各种浏览器各个版本的市场占有率。

browserslist

找到node_modules中的browserslist(这是我们安装webpack后就装上的包) 这里的这句话就是在向can i use的网站发送请求

var agents = require('caniuse-lite/dist/unpacker/agents').agents

对于Mac系统的电脑可以在npx browserslist 后面添加条件。如下条件为市场使用率大于1%，或者最新的两个版本。只要符合一个条件就会输出。 windows的电脑没有办法添加条件。

在配置文件中添加

可以去修改 package.json的配置

修改 package.json

在package.json中添加browserslist，就会读取配置。我们可以把最近两个版本改成最近四个版本，然后 npx browserslist 执行看一看区别

{
  "name": "webpack_emo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:yang-yiming1234/webpack_emo.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0"
  },
  "devDependencies": {
    "css-loader": "^6.7.1",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "browserslist":[
    ">1%",
    "last 4 version",
    "not dead"
  ]
}

如下可以看到四个版本

.browserslistrc

在根目录中新建 .browserslistrc文件添加配置

>1%
last 2 verions
not dead

webpack browserslitrc工作流程

Can i use

browserslist

在配置文件中添加

修改 package.json

.browserslistrc