Настройка Autoprefixer под Webpack

Autoprefixer - это плагин PostCSS для добавления вендорных префиксов на основе данных сервиса Can I Use. Благодаря этому плагину, создание кроссбраузерного CSS стало проще. Не нужно добавлять ‘мусорный’ код, так как PostCSS является постобработчиком и добавляет уже, непосредственно, при сборке web-приложения. Это будет небольшой заметкой как быстро настроить Autoprefixer для Webpack 2.

1. Установка

Для начала необходимо установить postcss-loader, который позволяет использовать PostCSS в экосистеме Webpack, без лишних “телодвижений” :

npm install postcss-loader

Также устанавливаем сам плагин:

npm install autoprefixer

2. Конфигурация

Импортируем в файл webpack-конфигурации: const autoprefixer = require('autoprefixer');

И правим в разделе module.rules. Добавляем правило для .scss или .css типов:

{
    loader: 'postcss-loader',
    options: {
        plugins: [
            autoprefixer({
                browsers:['ie >= 8', 'last 4 version']
            })
        ],
        sourceMap: true
    }
},

Важно чтобы оно было расположено после style-loader, css-loader и до sass-loader (если таковой имеется). В опции postcss-loader добавляем плагин, у него же в конструктор передаются опции. Опции можно посмотреть в официальном мануале. Большинство из них включены по умолчанию, можно их опционально отключить. Мы передадим массив браузеров, которые мы хотим использовать. Autoprefixer поддерживает выражения Browserlist, такие как: 'ie >= 8', 'last 4 version'.

В конечном счете, для .scss были добавлены следующие правила:

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            autoprefixer({
                                browsers:['ie >= 8', 'last 4 version']
                            })
                        ],
                        sourceMap: true
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: [
                            helpers.root('src', 'styles', 'global'),
                        ],
                        sourceMap: true
                    }
                }
            ],
        },
    ]
},

Плюсом такого подхода является скорость настройки и отсутствие необходимости создавать специальные файлы конфигурации для PostCSS.