Авторепрефикс не работает для веб-пакета

Question

У меня есть следующая конфигурация веб-пакета ниже, но проблема в том, что сгенерированный файл 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

У меня были проблемы с получением автоматического префикса для работы с 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"s [README.md][1], мой browserslist файл ниже. я имею Last 10 versions для тестирования я знаю, что это излишне.

Корень проекта / список браузеров:

# Browsers that we support

Last 10 versions