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

Question

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

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

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

css

gulp

webpack

autoprefixer