【Webpack】PostCSS Loader has been initialized using an options object that does not match the API schema. options has an unknown property ‘plugins’. These properties are valid:とエラーが出る

Webpack を 4 から 5 にしたり、Post CSS をアップグレードした時に下記のエラーが出ました。

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }

webpack.config.js の該当箇所

...
            {
              loader: "postcss-loader",
              options: {
                plugins: [
                  require('autoprefixer')({
                    grid: 'autoplace',
                  })
                ]
              }
            },
...

解決策

どうやら Post CSS の options 配下は { postcssOptions?, execute?, sourceMap?, implementation? } プロパティしか認められていないようです。

調べたところ、今回のようなpluginsを設定するにはpostcssOptions配下に設定する必要があるため、以下のように書き換えます。

...
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    require('autoprefixer')({
                      grid: 'autoplace',
                    })
                  ]
                }
              }
            },
...