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]中的生产＆＃39;部分中的＆＃39;常见问题解答/无前缀。我的browserslist文件。我有{{1出于测试目的，我知道它有点矫枉过正。

项目root / browserslist：

Last 10 versions

autorepfixer不适用于webpack

1 个答案: