自动修复器不能为webpack工作

Question

我有下面的web包配置，但问题是生成的css文件不包含任何供应商前缀。有人能给我指出我错过了什么吗?

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
  entry: ['./app/main.js'],
  output: {
    path: process.env.NODE_ENV === 'production' ? './dist' : './build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { 
        test: /.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react'],
        }
      },
      { test: /.scss$/, loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader', 'sass-loader']) }
    ]
  },
  postcss: function () {
        return [autoprefixer({
      browsers: ['last 2 versions']
    }), precss];
  },
  plugins: [
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]
};

Answer 1

我在让autoprefixer与Webpack和ExtractTextPlugin一起工作时遇到了麻烦，但我最终让它与以下Webpack .config.js一起工作:

require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const processHTMLPages = require('./processHTMLHelper.js');
const autoprefixer = require('autoprefixer');
const extractCSS = new ExtractTextPlugin('./style/style.css');
const plugins = [
  extractCSS,
].concat(processHTMLPages());
module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    './source/index.js',
  ],
  module: {
    loaders: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loaders: ['babel'],
      },
      {
        test: [/.scss$/i, /.css$/],
        loader: extractCSS.extract(['css?-minimize', 'postcss', 'sass']),
      },
    ],
  },
  postcss: [autoprefixer()],
  resolve: {
    extensions: ['', '.js', '.es6'],
  },
  output: {
    path: `${__dirname}/build`,
    filename: 'index.js',
  },
  devServer: {
    contentBase: `${__dirname}/build`,
  },
  plugins,
};

关键部分是css?-minimize，而不是将浏览器配置传递给postcss: [autoprefixer()]，而是将浏览器配置放在根目录中名为browserslist的文件中(原因请参阅autoprefixer的[README.md][1]中的"FAQ/No prefix in production"一节)。下面是我的browserslist文件。我有Last 10 versions用于测试目的，我知道它是多余的。

Project root/browserslist:

# Browsers that we support
Last 10 versions