Как настроить автопрефиксер для webpack?

Question

[Dryzhkov]

Здравствуйте столкнулся с проблемой по настройке для вебпака плагина автопрефиксер, в интернете нагуглил старые данные, которые не работают с 5-й версией. Проблема в том, что оф документация советует создавать отдельный файл для конфигов postcss, что естественно не удобно.

Подскажите, пожалуйста, кто то может быть как то настраивал без этого файла?

Comments

[fallus]

У меня так настроено непосредственно в конфиге Webpack. Но я и настраивал его с нуля, без create-react-app, webpack-cli и т.n.

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
        loader: 'postcss-loader',
          options: {
            sourceMap: false,
            plugins: [ require('autoprefixer'), require('cssnano') ]
          }
        }
      ]
    }
  ]
},

Список браузеров, конкретно в моё случае, в package.json:

"browserslist": [
    "> 1%",
    "chrome > 48",
    "safari > 7",
    "IE 10"
  ]

Answer 1

[Mikhail Derkach]

Когда у вас большой конфиг, логичнее все сторонние опции держать отдельно.
Если же вам не подходит, то обращайтесь к документации. И прямо там, если полистать ниже, вы увидите такой пример:

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

А так же, там есть пометки, что данный подход deprecated, и когда-нибудь вам придется переписать это в отдельный конфиг. Так почему не сделать это сразу?)

Comments

[Dryzhkov]

все же намучившись, я понял, что лучше да, создать отдельный конфиг, спасибо!

[Mikhail Derkach]

Dryzhkov, не за что :) просто когда у вас будет сложный проект, где вам сам конфиг вебпака, а не его модулей, придется держать отдельно

например, у меня почти везде в проектах разные дев и прод конфиги, потому что некоторые плагины нужны только в деве, а запускать весь конфиг дорого по времени на сборку/апдейт выходит

[Dryzhkov]

Mikhail Derkach, понял, но я вроде бы еще слышал, что можно запускать gulp в потоке webpack, но документации об этом нет. Вы случаем, об этом не слышали?)

[Mikhail Derkach]

Dryzhkov, слышал, что можно делать наоборот
как пример, что нужно, можете посмотреть тут:
https://stackoverflow.com/questions/33558396/gulp-...
https://vivasart.com/lab/ispolzovanie-webpack-sovm...
https://www.npmjs.com/package/webpack-stream

но лично я уже с таким подходом больше года не сталкивался в проектах, а на работе исключительно вебпак

Answer 2

[Just Me]

держи для webpack 5. Вариант для прода

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