How to use autoprefixer with Webpack 1.x.x?

问题

I'm writing an Angular 1.5.x app with components that embed their own style. The <leave-calendar> component define a linear-gradient background which works fine on Firefox but need the vendor prefix in Chromium. Here is what I have done so far:

Requirements

a working component ;
installed postcss-loader:
```
yarn add --dev postcss-loader
```

add browserslist to package.json:

"browserslist": [
    "> 1%",
    "last 2 versions",
    "ie 9"
]

`leave-calendar.html`

<style lang="scss">
    .leave-draft {
        background-color: #f0ad4e;
        background-image: linear-gradient(45deg, #fff3 25%, transparent 25%, transparent 50%, #fff3 50%, #fff3 75%, transparent 75%, transparent);
    }
</style>
<div class="container-fluid">
    …
</div>

Config

`postcss.config.js`

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

`webpack.config.js`

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, './static'),
        publicPath: '/static/',
        filename: 'app.min.js'
    },    
    resolve: {
        root: path.resolve('./src'),
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader'},
            {test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!sass-loader'},
            {test: /\.html$/, loader: 'html-loader'},
        ]
    }
};