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

As of July 20, 2017 to set up Autoprefixer with Webpack v2.4.1 I did the following:

Install necessary loaders:

yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader

create a postcss.config.js file in the root directory of your project:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

In your root level package.json specify browsers you want to support:

"browserslist": ["defaults", "not ie < 11"]

In your webpack.config.js file's module.rules specify your loaders with the postcss-loader following the css-loader (I'm also using scss):

  {
    test: /\.scss$/,
    use: [
      {
        loader: 'style-loader' // Adds CSS to the DOM by injecting a