看起来你已经在用ExtractTextPlugin处理CSS了，那咱们直接基于你现有的配置一步步来添加Autoprefixer：

1. 安装依赖包 #

首先得装三个核心工具：postcss（PostCSS的核心库）、postcss-loader（Webpack用来运行PostCSS的加载器）、autoprefixer（自动给CSS加前缀的PostCSS插件）。在终端运行：

npm install --save-dev postcss postcss-loader autoprefixer
# 用Yarn的话就跑这个：
# yarn add -D postcss postcss-loader autoprefixer

2. 修改Webpack配置文件 #

找到你webpack.config.js里处理CSS的module.rules规则，修改extractCssPlugin.extract里的use数组，把postcss-loader加进去。注意loader是从右到左执行的，所以要把postcss-loader放在css-loader后面（这样它会先干活，给CSS自动补全前缀）：

module.exports = {
  // ... 你原有的其他配置
  module: {
    rules: [
      // ... 其他loader规则
      {
        test: /\.css$/,
        use: extractCssPlugin.extract({
          fallback: 'style-loader',
          // 这里加入postcss-loader
          use: ['css-loader', 'postcss-loader']
        })
      }
    ]
  },
  // ... 你原有的插件配置（extractCssPlugin这些保持不变）
};

3. 配置Autoprefixer规则 #

有两种配置方式，推荐第一种更清晰的：

方式一：单独创建postcss.config.js文件 #

在项目根目录新建postcss.config.js，内容写：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

方式二：直接内嵌到Webpack配置里 #

要是不想单独建文件，也可以在postcss-loader的选项里直接配置：

// ... 其他配置
use: [
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      plugins: [
        require('autoprefixer')
      ]
    }
  }
]
// ...

4. 指定浏览器兼容范围（关键步骤！） #

Autoprefixer得知道你要兼容哪些浏览器，才知道该加哪些前缀。在项目根目录的package.json里加个browserslist字段：

{
  // ... 你原有的package.json内容
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

这个配置的意思是：兼容全球使用率超过1%的浏览器、每个浏览器的最近2个正式版本，同时排除IE8及以下。你可以根据自己的项目需求调整这些规则。

5. 验证配置是否生效 #

写一段需要前缀的CSS代码试试，比如：

.flex-box {
  display: flex;
  transition: all 0.3s;
}

然后运行Webpack构建，打开输出的css/main.min.css，如果看到类似display: -webkit-box; display: -ms-flexbox; display: flex;这种带前缀的代码，就说明配置成功啦！

内容的提问来源于stack exchange，提问作者Amisha64