什么是postcss？
postcss是一个通过javascript来转换样式的工具
它能够帮助我们对css进行一些转换和适配
但实现这些功能需要依赖于他的相关插件
安装postcss工具的相关包与插件
安装postcss及postcss-cli
npm i postcss postcss-cli -D
安装postcss-loader
postcss-loader可单独使用，但一般会配合webpack使用，如果要配合webpack使用postcss，则需要安装postcss-loader
npm i postcss-loader -D
// 如果要在webpack中使用postcss就需要下载postcss-loader
安装postcss预设，postcss-preset-env (重要)
安装并使用该预设时，预设的相关插件就包含了
1.补齐浏览器前缀 --> autoprefixer
2.css3兼容
等相关兼容性的功能插件，所以无需单独去安装自动补齐浏览器前缀等兼容插件
- 安装：
npm i postcss-preset-env -D
//该预设安装后可对部分版本较高的css代码进行兼容
- 使用：
/* webpack.config.js */
{
test:/\.css$/,
use:[
"style-loader",
"css-loader",
"postcss-loader"
]
}
处理less文件
通常我们在编译css时一般喜欢用less或者sass之类的css扩展语言去编写css，他是由.less后缀的单独的一种文件，webpack打包时并不认识less文件，所以需要安装相应的loader来处理less文件！
安装与使用less和less-loader
-
安装：
npm i less less-loader -D // less是语言本身的核心，而less-loader则是将less文件转换为css -
使用：
/* webpack.config.js */ { test: /\.less$/i, loader: [ 'style-loader', 'css-loader', 'postcss-loader' 'less-loader', ], },
less-loader相关文档：less-loader | webpack 中文文档 (docschina.org)
使用mini-css-extract-plugin插件将css代码单独提取成.css文件
通常，我们在js或css中书写的代码，如果通过style-loader去处理，它相当于将我们的css代码写在style标签内并插入到html文件里，所以如果我们需要单独将这些css代码抽离出一个单独的.css文件，那么就需要用到该插件，请注意，该插件和postcss没有直接关系，使用该插件不要和style-loader一起使用，style-loader是将css写入style标签并插入到html文件，而本插件是单独提取成单独文件，两者冲突！
-
安装：
npm i mini-css-extract-plugin -D -
使用：
/* webpack.config.js */ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module:{ rules:[ { test:/\.css$/i, use:[ // 在use最前处使用，相当于替换style-loade位置 MiniCssExtractPlugin.loader, "css-loader", "postcss-loader" ], }, ] }, plugins: [ new MiniCssExtractPlugin({ // 使用filename配置可以指定输出的css的文件名和文件位置 filename:'css/[name]_[hash:6].css' }) ],有关更多MiniCssExtractPlugin的相关配置：
