2021最新webpack5: postcss-loader处理兼容

P10 10-postcss-loader处理兼容

postcss-loader 应该加在哪里

1. 在sass/less之后进行工作，相当对他们生成的css文件进行2次加工
2. 最后把生成的文件扔给 css-loader 处理
3. 最后再到 style-loader 处理

postcss需要添加一些插件才能工作，常用的插件

1. autoprefixer
2. 其它插件
3. 插件的配置：可以在项目目录下添加 postcss.config.js 里进行配置

postcss-preset-env

1. 是一个预设
2. 或者说是插件的集合
3. 安装这个插件的时候，会看到现在一堆的插件

├─ css-blank-pseudo@3.0.2
├─ css-has-pseudo@3.0.2
├─ css-prefers-color-scheme@6.0.2
├─ cssdb@5.1.0
├─ postcss-attribute-case-insensitive@5.0.0
├─ postcss-color-functional-notation@4.2.1
├─ postcss-color-hex-alpha@8.0.2
├─ postcss-color-rebeccapurple@7.0.2
├─ postcss-custom-media@8.0.0
├─ postcss-custom-properties@12.0.4
├─ postcss-custom-selectors@6.0.0
├─ postcss-dir-pseudo-class@6.0.2
├─ postcss-double-position-gradients@3.0.4
├─ postcss-env-function@4.0.4
├─ postcss-focus-visible@6.0.3
├─ postcss-focus-within@5.0.3
├─ postcss-font-variant@5.0.0
├─ postcss-gap-properties@3.0.2
├─ postcss-image-set-function@4.0.4
├─ postcss-initial@4.0.1
├─ postcss-lab-function@4.0.3
├─ postcss-logical@5.0.2
├─ postcss-media-minmax@5.0.0
├─ postcss-nesting@10.1.1
├─ postcss-overflow-shorthand@3.0.2
├─ postcss-page-break@3.0.4
├─ postcss-place@7.0.3
├─ postcss-preset-env@7.2.0
├─ postcss-pseudo-class-any-link@7.0.2
├─ postcss-replace-overflow-wrap@4.0.0
└─ postcss-selector-not@5.0.0

常规的webpack配置

实际上，postcss-loader 的配置会扔到 postcss.config.js 里去

好处是：.css/.sass/.less 的配置，不用写多份相同的配置。

{
  test: /.css$/,  // 正则，匹配将要处理的文件(filename)类型
  use: [
    'style-loader',
    'css-loader', {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            'postcss-preset-env'
          ]
        }
      }
    }
  ]
}