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; }
作者：荷包蛋卷
链接：https://juejin.cn/post/7032918076089696264