webpack中AutoPrefixer添加前缀

react+webpack项目配置文件中引入了postcss中的AutoPrefixer插件用于处理自动添加css前缀,例如-webkit-、-moz-;
配置代码如下:

var autoprefixer = require('autoprefixer');

.....

module: {
        preLoaders: [
            // 配置 eslint-loader
            {test: /\.(js|jsx)$/, loader: "eslint-loader",include:srcPath, exclude: /node_modules/}
        ],
        loaders: [
            { test: /\.js$/, loader: "jsx!babel", include: /src/ ,exclude: /node_modules/},
            { test: /\.css$/, loader: ExtractTextPlugin.extract("css", "css!postcss") },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("css", "css!postcss!sass!sass-resources-loader") },
            {test: /\.less$/, loader: ExtractTextPlugin.extract('css','css!postcss!less')},
            { test: /\.(png|jpg)$/, loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]' }
        ]
    },
    postcss: [ autoprefixer({ browsers: ['last 10 versions'] })

Autoprefixer默认将支持主流浏览器最近2个版本,这点类似Google。不过你可以在自己的项目中通过名称或者模式进行选择:

  • 主流浏览器最近2个版本用“last 2 versions”;
  • 全球统计有超过1%的使用率使用“>1%”;
  • 仅新版本用“ff>20”或”ff>=20″.

==注:autoprefixer({ browsers: ['last 10 versions'] },不生效的话,可以往后多写几个版本==

你可能感兴趣的:(webpack中AutoPrefixer添加前缀)