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

Question

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

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

我的理解是 webpack 从右到左读取加载器，所以 autoprefixer-loader 不应该放在 webpack 链中的 css-loader 之前。这意味着 autoprefixer 在 css 加载后被调用，正如它在这个 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