postcss-loader的一些使用方式

作为处理css兼容性的插件存在，通常在webpack中进行配置，使用方式有以下几种。

1.autoprefixer

首先安装 npm i postcss-loader autoprefixer -D
autoprefixer 就是处理各种浏览器兼容添加前缀的

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    // 必须绝对路径
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                 require('autoprefixer')
              ]
            }
          }
        }]
      }
    ]
  }
}

这就是最基本的处理方法

2.postcss-preset-env

这是对于一些需要使用现代css所用的插件，比如color: #12345678
同时该插件包含了 autoprefixer的功能，所以一般推荐使用

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                 //require('autoprefixer'),
                 require('postcss-preset-env')
              ]
            }
          }
        }]
      }
    ]
  }

3.外部文件解析

上面两种方式都可以通过新建一个外部文件 postcss-config.css 配置，从而减少webpack的配置
比如：

postcss-config.css ：

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

webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }