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 transform
            require('postcss-cssnext')() // 如 :root{--mainColor:red} a{color:var(--mainColor)}
        ]

    }
}

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

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