css autoprefixer with webpack

Question

I have been trying to configure webpack with LESS and Autoprefixer, but autoprefixer does not seem to work. My css or less files are not autoprefixed. Example: display: flex stays display: flex

I have put my webpack config below:

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};

Answer 1

So found the problem. Silly me, the postcss block needs to be directly under the webpack config, I had put it in modules block. My Bad.

EDIT: this is how it should have been:

var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};

So instead of putting it inside the modules block, I had to put it directly under the main block as shown above.