[JavaScript知识库]webpack基础(八)——PostCss

一、什么是PostCss
PostCss就是通过js代码来第css进行转换，比如给css加上浏览器前缀。当然这些工作也是需要一些插件来一起完成的。
二、在命令行执行postcss

1、首先安装postcss postcss-cli，
npm install postcss postcss-cli -D

2、安装所需要的依赖（autoprefixer是填充浏览器前缀的）
npm install autoprefixer -D

3、执行命令
npx postcss --use autoprefixer -o end.css test.css

三、在开发环境中使用postcss
我们不能一直在命令行环境中使用postcss,我们也可以在webpack中使用postcss，此时需要安装postcss-loader,postcss-loader是依赖于postcss的。npm install postcss-loader -D

在webpack.config.js中配置
{
        test:/\.css$/,
        use:{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:[
                require("autoprefixer")
              ]
            }
          },
        }
      }

也可以在外部的postcss.config.js的文件中进行配置。

module.exports = {
	plugins:[
		require("autoprefixer")
	]
}

postcss-preset-env也是postcss的一个插件，类似于babel的预设。postcss-preset-env中存在着一些插件、帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境
添加所需的polyfill，同时也可以自动帮助我们添加autoprefixer

module.exports = {
  plugins:[
    require("postcss-preset-env")
  ]
}