webpackの自動返信機能が動作しない

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で動作するようにautoprefixerを得るトラブルを抱えていたが、私は最終的には、以下の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という名前のファイルにします（理由は 'FAQ /プロダクションのプレフィックスはありません'のautoprefixerの[README.md][1]私のbrowserslistファイルb elow。私はLast 10 versionsのテスト目的のために、私はそれが残酷であることを知っている。

プロジェクトルート/ browserslist：

# Browsers that we support 

Last 10 versions