Webpack 4中autoprefixer配置失效及加载器解析错误求助

你遇到的问题主要源于三个配置误区：废弃加载器的误用、Loader顺序/写法错误，以及错误地将Autoprefixer当作Webpack插件引入。下面一步步帮你修正：

问题拆解 #

1. autoprefixer-loader已被废弃：这个加载器早已被官方弃用，现在Autoprefixer是作为PostCSS的插件，通过postcss-loader来调用的。
2. Loader写法违规：Webpack不允许把多个Loader用!拼接在同一个loader字段中，每个Loader需要单独列在use数组里。
3. 插件配置错误：Autoprefixer不属于Webpack插件体系，你不需要把它加到plugins数组中。

修复步骤 #

1. 创建PostCSS配置文件 #

在项目根目录新建postcss.config.js，专门配置Autoprefixer：

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

2. 修正Webpack的CSS Loader规则 #

把你原有的CSS规则替换为以下代码，注意Loader的顺序（Webpack是从右到左执行Loader的）：

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1 // 确保@import引入的CSS文件也能被postcss-loader处理
      }
    },
    'postcss-loader'
  ]
}

3. 移除错误的插件配置 #

从plugins数组中删掉autoprefixer这一项，因为它不是Webpack插件：

plugins: [
  new CleanWebpackPlugin('dist', {} ),
  new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  }),
  new MiniCssExtractPlugin({
    filename: "main.css",
    chunkFilename: "[id].css"
  })
  // 移除这里的autoprefixer
];

4. 指定目标浏览器范围（可选但关键） #

为了让Autoprefixer明确要生成哪些前缀，在package.json中添加browserslist字段，示例配置如下：

"browserslist": [
  "last 2 versions",
  "ie >= 10"
]

这个配置会告诉Autoprefixer兼容主流浏览器的最近2个版本，以及IE10及以上版本。

验证修复 #

重新运行Webpack打包命令后，你会发现dist/main.css中已经生成了期望的前缀：

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

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