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

Question

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

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'));
});

Answer 1

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

只是提醒一下，autoprefixer-loader 现在已被弃用。你可能想切换到 postcss-loader

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