2021最新webpack5: browserslitrc工作流程

P8 08-browserslitrc工作流程

原理

1. 根据一些条件: .browserslistrc 的配置，去 caniuse 网站进行查询(caniuse-lite包)
2. 得到结果，反馈给 css/js 工具链，让webpack 编译出符合条件的代码

一个示例配置文件 JSON 方式(package.json)

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

一个文件方式的配置 .browserslistrc

[production]
> 1%
not dead
not op_mini all

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

常用命令

❯ npx browserlist
npx: installed 8 in 2.066s

参考

• https://stackoverflow.com/questions/56647770/react-create-app-get-error-about-browserslist-error