Search code examples
cssgulpwebpackautoprefixer

In WebPack why is the placement of the autoprefixer-loader after the css-loader in the chain

Here is the example for the autoprefixer for webpack from it's website.

loaders: [{
    test: /\.css/,
    loader: 'style-loader!css-loader!autoprefixer-loader'
  }]

It is my understanding that webpack reads loaders from right to left so shouldn't the autoprefixer-loader be palced before the css-loader in webpack's chain. This would imply that autoprefixer is called after the css has been loaded, as it does in a gulp chain as seen by this gulp example.

gulp.task('default', function () {
    return gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'));
});
Solution

  • autoprefixer-loader just adds the auto-prefix code to you css, then after the css-loader process the css file (url, fonts etc). so its fine.

    just a heads up, autoprefixer-loader is deprecated now. you might want to make the switch to postcss-loader

    https://github.com/postcss/postcss-loader