webpack browserslitrc工作流程
2023-02-25 18:16:14 时间
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
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023