在webpack中为css自动添加浏览器前缀，核心做法是安装 postcss-loader 并配置 autoprefixer 插件。通过设置 browserslist 目标环境，构建时会自动根据规范插入兼容代码。
如何配置PostCSS加载器与Autoprefixer？
需要安装依赖并在 webpack.config.js 的 module.rules 中添加规则。使用 postcss-loader 处理 .css 文件，并通过 options 或外部配置文件启用 autoprefixer。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
};同时创建 postcss.config.js：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions', '> 1%']
})
]
};Autoprefixer如何确定需要添加哪些前缀？
它依据 browserslist 配置查询 caniuse 数据库。若未显式配置，则读取项目根目录的 package.json 中的 browserslist 字段或 .browserslistrc 文件。默认行为通常覆盖全球使用率超过0.5%的浏览器及最近两个版本。
// package.json 示例
{
"browserslist": [
"defaults",
"not ie <= 11"
]
}当CSS属性已无前缀需求时会发生什么？
如果当前主流浏览器已原生支持某属性（如 flex），autoprefixer 将不会添加任何前缀。例如 display: flex; 在现代环境中保持原样，仅对旧版IE等特定环境输出 -ms-flexbox 等。
