一，概述

postcss是一个用js工具和插件转换css代码的工具。比如说可以使用Autoprefixer插件自动获取浏览器流行度和能够支持的属性，并且根据这些数据帮助我们自动地为css规则添加前缀，将最新的css语法转化成大多数浏览器能够理解的语法。

二，具体的应用

第一步，安装依赖

npm i mini-css-extract-plugin css-loader  postcss-loader -D

这里需要解释一下，mini-css-extract-plugin插件是替换style-loader插件的（都是把css-loader解析后的代码添加到html上，不同的是style-loader直接添加到html上，而mini-css-extract-plugin是采用link资源的方式添加。所以这里直接使用mini-css-extract-plugin）

第二步，在module的rules中配置

 {test: /\.(scss|css)$/,use: [{loader: MiniCssExtractPlugin.loader,options: {// 当前的css所在的文件要相对到dist文件夹publicPath: "../../"}},"css-loader","postcss-loader","sass-loader"]},

注意这里的use数组中的配置，是有顺序要求的，比如我这里是使用scss预处理器，还安装了sass-loader。
那么写出来的style.scss文件，先是经过sass-loader编译处理成常规的css,然后，再经由postcss-loader添加浏览器兼容前缀。再经过css-loader解析成webpack能够理解的模块。最后经由MiniCssExtractPlugin来通过link链接到index.html上。
写如下的css代码，会发现并没有添加兼容浏览器的 css3前缀，这是因为还需要安装一个插件来实现这一个功能。

第三步，安装autoprefixer

npm i autoprefixer -D

然后再在项目根目录下创建一个文件：postcss.config.js,这个文件是专门用来配置css的插件的。

第四步，配置postcss.config.js

module.exports = () => {return {plugins: {autoprefixer: {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8"]}}};
};

值得注意的是，浏览器兼容列表可以不写这里，而是配置在package.json文件中。
通常我们这样配置这个postcss.config.js文件：

module.exports = () => {return {plugins: {autoprefixer: {}}};
};

而会在package.json中配置浏览器兼容：

"browserslist": ["> 0.1%","last 2 versions"],

尽量不要用browserslist最好放在.browserslistrc或者package.json内
postcss.config.js内 overrideBrowserslist 的优先级高于 package.json的browserslist，且不能为空，否则会不生效。

于是重启项目，则会看到前缀了：

webpack5学习与实战-（十三）-postcss处理css3兼容性前缀相关推荐

R基于H2O包构建深度学习模型实战
R基于H2O包构建深度学习模型实战目录 R基于H2O包构建深度学习模型实战 #案例分析
深度学习项目实战-关键点定位视频课程
课程目标快速掌握如何使用caffe框架完成一个深度学习的实际项目适用人群深度学习爱好者,全民皆可入门课程简介深度学习项目实战-关键点定位课程以人脸关键点检测为背景,选择多阶段检测的网络架构, ...
资源|2019 年 11 月最新《TensorFlow 2.0 深度学习算法实战》中文版教材免费开源（附随书代码+pdf）...
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送 2019 年 10 月,谷歌正式宣布,开源机器学习库 TensorFlow 2.0 现在 ...
【重磅干货】Python、机器学习、深度学习算法实战和应用必备书籍
[导读]首先祝大家中秋佳节快乐,乘此良辰美景,今天就给大家发一波福利干货!本文给大家分享机器学习.深度学习算法实战和应用必备的4本"宝藏"书.具体书籍展示如下:(文末提供下载方式! ...
【深度学习】实战Kaggle竞赛之线性模型解决波士顿房价预测问题（Pytorch）
[深度学习]实战Kaggle竞赛之线性模型解决波士顿房价预测问题文章目录 1 概述1.1 Competition Description1.2 Practice Skills 2 数据处理 3 训练 ...
javaweb学习总结(三十三)——使用JDBC对数据库进行CRUD
javaweb学习总结(三十三)--使用JDBC对数据库进行CRUD 一.statement对象介绍 Jdbc中的statement对象用于向数据库发送SQL语句,想完成对数据库的增删改查,只需要通过 ...
Windows保护模式学习笔记（十三）—— PWTPCD
Windows保护模式学习笔记(十三)-- PWT&PCD 要点回顾 CPU缓存 CPU缓存与TLB的区别 PWT(Page Write Through) PCD(Page Cache Dis ...
转载：javaweb学习总结(二十三)——jsp自定义标签开发入门
javaweb学习总结(二十三)--jsp自定义标签开发入门转自:http://www.cnblogs.com/xdp-gacl/p/3916734.html 一.自定义标签的作用自定义标签主要用 ...
GPU（CUDA）学习日记（十三）------ CUDA内存简介
GPU(CUDA)学习日记(十三)------ CUDA内存简介标签: cuda存储线程结构 2012-12-07 16:53 2902人阅读评论(0)收藏举报分类: GPU(16) CUDA ...
400页《TensorFlow 2.0 深度学习算法实战》中文版教材免费下载（附随书代码+pdf）...
Tensorflow自谷歌提出以来就成为最受欢迎的深度学习框架之一,到目前为止也已经被下载超过 4000 万次.其中TensorFlow2.0更是修复之前非常多的不人性的特性,备大家欢迎. 今天给大家 ...

webpack5学习与实战-（十三）-postcss处理css3兼容性前缀