Using autoprefixer with postcss in webpack 2.x

Question

How to use autoprefixer with webpack 2.x.

Previously, it used to be something like this...

...

module: {
  loaders: [
     {
       test:          


        

Answer 1

There is no more need to use LoaderOptionsPlugin. Now you can pass options directly to the loader declaration.

const autoprefixer = require('autoprefixer');

let settings = {
    /*...*/
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                /*...other loaders...*/
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [autoprefixer]
                        }
                    }
                }
                /*...other loaders...*/
            ]
        }]}         
    }
    /*...*/
};

In case if you need to provide specific compatibility configuration, you can pass it as argument to autoprefixer function:

options: {
    plugins: function () {
        return [autoprefixer('last 2 versions', 'ie 10')]
    }
}