面试题：Webpack 中处理 CSS 兼容性常用的插件及配置

在 Webpack 项目里，处理 CSS 兼容性问题常用的插件有：

Autoprefixer：根据目标浏览器，自动为 CSS 属性添加前缀。
postcss-preset-env：可以将现代 CSS 语法转换为大多数浏览器能理解的语法，同时也包含了 Autoprefixer 的功能。

以 Autoprefixer 为例，基本配置步骤如下：

安装插件：

npm install autoprefixer --save-dev

配置 PostCSS：在项目根目录创建 postcss.config.js 文件（如果项目已有则无需创建），并添加以下内容：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

在 Webpack 中配置：如果项目使用 css - loader 和 style - loader 处理 CSS，在 Webpack 配置文件（一般是 webpack.config.js）中找到处理 CSS 的 module.rules 规则，在 postcss - loader 中进行配置，示例如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
           'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('autoprefixer')
              ]
            }
          }
        ]
      }
    ]
  }
};

这样就完成了 Autoprefixer 在 Webpack 项目中的基本配置，它会根据目标浏览器为 CSS 属性自动添加前缀，解决兼容性问题。

面试题：Webpack 中处理 CSS 兼容性常用的插件及配置

知识考点

面试题答案