webpack5 中 css-loader 的配置

333 阅读1分钟

loader 解释器


css 文件抽离插件

我们在开发中如果希望 CSS 文件单独的抽离出来而不是在js文件中的话,我们可以通过下面的插件对 CSS 进行抽离。

yarn add -D mini-css-extract-plugin


CSS 浏览器版本兼容插件

很多同学在日常的板砖中肯定遇到过 CSS 的样式对于个浏览器的兼容性不好的问题,对于这种问题其实我们通过一个插件就可以解决大部分兼容问题,这个插件会自动给需要的属性添加类似 -webkit- 灯类似的前缀。

yarn add -D postcss postcss-loader postcss-preset-env

创建postcss配置文件 postcss.config.js

创建 postcss-preset-env 配置文件 .browserslistrc

例子说明
last 2 versions所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
> 1%全球超过1%人使用的浏览器
Firefox ESR火狐最新版本
Firefox > 20指定浏览器的版本范围
not ie <=8方向排除部分版本
// 示例
last 2 versions // 回退两个浏览器版本
> 0.5% // 全球超过0.5%人使用的浏览器
IE 10 //兼容IE 10