webpack 完全指南:Autoprefixer
因为现在市面上的浏览器类型众多,作为一名前端开发者就需要面对很多兼容性的问题,有些问题我们可以在构建阶段就对其处理,比如 CSS3 的前缀问题。
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
这里插播一下:为什么有些属性需要添加前缀呢?
因为 css 中有一些属性还没有确定下来,标准规范还没有发布,许多浏览器支持的程度也不同,而且每个浏览器厂商同一个样式支持的写法也不同,所以要加前缀来达到各个浏览器兼容,将来统一了规范就不用写前缀了。
如果,我们日常每一个属性都因为兼容性要写四到五遍,那肯定是繁琐的不行。
那么,在 webpack 中有完美解决方案吗?
autoprefixer
autoprefixer
插件 就可以帮我们自动补齐前缀,解放双手,关怀前端人的心智负担。它和 less、scss 这样的预处理器不同,它属于后置处理器,所谓 预处理器 是指在打包之前进行处理,所谓 后置处理器 是在代码打包生成后再进行处理。
autoprefixer
其实是 postcss 的一个插件,postCss 本身是一个用 JavaScript 工具和插件转换 CSS 代码的工具,他提供了许多强大的处理 CSS 的功能,比如:
autoprefixer
: 利用从 Can I Use 网站 获取的数据为 CSS 规则添加特定厂商的前缀。PostCSS Preset Env
: 将最新的 CSS 语法转换成大多数浏览器都能理解的语法,并根据你的目标浏览器或运行时环境来确定你需要的 polyfills,此功能基于 cssdb 实现。CSS Modules
: 将 CSS 模块化,再也不用担心全局命名冲突的情况。stylelint
: 强化 CSS 的样式约束,并避免 CSS 代码中的错误。
使用
安装
首先,需要安装一下 postcss-loader
和 autoprefixer
,postcss-loader
使用 PostCSS 处理 CSS 的 loader:
npm install postcss-loader autoprefixer --save-dev
配置
在 webpack 配置文件中进行配置:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["autoprefixer"],
},
},
},
],
},
],
},
};
测试
配置完成后,我们可以通过下面这行 CSS 测试是否成功:
::placeholder {
color: gray;
}
autoprefixer
处理后的输出:
::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
webpack 系列
转载自:https://juejin.cn/post/7032918076089696264