webpack基础 -- PostCSS

postcss: 在打包时期作用.

安装: postcss / postcss-loader / postcss-cssnano / postcss-cssnext / autoprefixer
npm install postcss postcss-loader cssnano postcss-cssnext autoprefixer –save-dev
autoprefixer: 加浏览器前缀
postcss-cssnano: 优化/压缩css
postcss-cssnext : 可以使用新的css语法 像css变量/自定义选择器/动态计算, 这个插件中包含了autoprefixer

在webpack.config.js中的位置: 在预处理语言之前, 在style-loader /css-loader 之后;

{loader: 'postcss-loader',options:{ident: 'postcss', // 说明以下插件是给postcss使用的plugins:[require('autoprefixer')() // 添加浏览器前缀 如 display transformrequire('postcss-cssnext')() // 如 :root{--mainColor:red} a{
    color:var(--mainColor)}]}
}

浏览器配置所有插件公用: 在package.json中配置, 先安装browerlist, 在package.json中加入一下代码:

"browserlist":[">= 1%""last 2 versions"
]