在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：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%']
    })
  ]
};

Autoprefixer如何确定需要添加哪些前缀？

它依据 browserslist 配置查询 caniuse 数据库。若未显式配置，则读取项目根目录的 package.json 中的 browserslist 字段或 .browserslistrc 文件。默认行为通常覆盖全球使用率超过0.5%的浏览器及最近两个版本。

flex

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！