在 WebPack 中，为什么将 autoprefixer-loader 放置在链中的 css-loader 之后答案

【问题标题】：In WebPack why is the placement of the autoprefixer-loader after the css-loader in the chain在 WebPack 中，为什么将 autoprefixer-loader 放置在链中的 css-loader 之后
【发布时间】：2016-03-30 15:06:25
【问题描述】：

这是来自其网站的autoprefixer for webpack 的示例。

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

据我了解，webpack 从右到左读取加载器，因此不应将 autoprefixer-loader 放在 webpack 链中的 css-loader 之前。这意味着在加载 css 之后调用 autoprefixer，就像在这个 gulp 示例中看到的 gulp 链中一样。

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

【问题讨论】：

标签： css gulp webpack autoprefixer

【解决方案1】：

autoprefixer-loader 只是将自动前缀代码添加到您的 css，然后在 css-loader 处理 css 文件（url、字体等）之后。所以很好。

请注意，autoprefixer-loader 现在已弃用。你可能想切换到 postcss-loader

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

【讨论】：

感谢您的帮助和 postcss 自动加载器