Webpack 3中使用PostCSS/Autoprefixer缺失CSS前缀问题求助

看起来你遇到的问题是Autoprefixer没有按照package.json里的browserslist配置生成完整的浏览器前缀，只输出了-webkit-相关的规则。结合你的配置细节，我整理了几个靠谱的修复方向：

1. 给Autoprefixer显式传递浏览器规则 #

虽然你已经在package.json里配置了browserslist，但适配Webpack 3的旧版Autoprefixer（通常是v9及以下）有时候无法自动读取这个配置。你可以直接在postcss-loader的插件配置里指定浏览器参数，确保规则生效：

修改你的postcss-loader配置段：

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    sourceMap: true,
    plugins: () => [
      autoprefixer({
        browsers: [
          "defaults",
          "not ie < 9",
          "last 2 versions"
        ]
      })
    ]
  }
}

2. 检查依赖版本兼容性 #

Webpack 3属于较旧的版本，必须搭配对应版本的postcss-loader和autoprefixer才能正常协作：

• postcss-loader要使用v3.x版本（v4+需要Webpack 4及以上支持）
• autoprefixer要使用v9.x版本（v10+依赖PostCSS v8，而Webpack 3生态适配的是PostCSS v7及以下）

你可以在项目中重新安装兼容的版本：

npm install postcss-loader@3 autoprefixer@9 --save-dev

3. 验证browserslist配置是否生效 #

有时候项目根目录的.browserslistrc文件会覆盖package.json里的配置，如果你有这个文件，要确保它的规则和预期一致。另外，你可以在终端运行npx browserslist命令，查看当前生效的浏览器列表，确认是否包含需要前缀的IE、Firefox版本。

额外小提示 #

你的字体文件loader配置有个小错误：file?=name/fonts/[name].[ext]应该改为file-loader?name=fonts/[name].[ext]，避免打包时出现路径异常问题。

内容的提问来源于stack exchange，提问作者Morten Hagh