How to setup autoprefixer for webpack?

Question

React

Hello, I ran into a problem setting up an autoprefixer plugin for webpack, I googled old data on the Internet that do not work with the 5th version. The problem is that the documentation advises creating a separate file for postcss configs, which is naturally not convenient.

Tell me, please, can someone somehow set it up without this file?

Answer 1

When you have a large config, it is more logical to keep all third-party options separately.
If it does not suit you, then refer to the documentation . And right there, if you scroll down below, you'll see this example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: {
              "postcss-import": {},
              "postcss-short": { prefix: "x" },
            },
          },
        },
      },
    ],
  },
};

And also, there are notes that this approach is deprecated , and someday you will have to rewrite it in a separate config. So why not do it right away?)

Answer 2

keep it for webpack 5 . Selling option

{
        test: /\.s?css$/,
          use: [
            MiniCssExtractPlugin.loader,
        {loader: 'css-loader', options: {sourceMap: false }},		    
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
          plugins: function () {
            return [
            require('autoprefixer')
            ];
          }
          }
        }
      },
      'sass-loader'
          ]
      }