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'] },不生效的话,可以往后多写几个版本==