Webpack 4中postcss-loader与autoprefixer插件配置失效问题求助

嘿兄弟，看你这Webpack配置里Autoprefixer没生效的问题，我一眼就瞅到几个关键点没做好——这坑我之前也踩过！来给你一步步捋清楚：

1. 先补全必要的依赖 #

你肯定已经装了postcss-loader，但还得装Autoprefixer本身和它依赖的PostCSS核心包：

npm install autoprefixer postcss --save-dev
# 用Yarn的话就是
yarn add autoprefixer postcss -D

2. 给PostCSS配置Autoprefixer插件 #

你的postcss-loader现在是空配置，它根本不知道要启用Autoprefixer，有两种配置方式：

方式一：直接在Webpack配置里写（适合简单项目） #

修改你Webpack规则里的postcss-loader部分，加上插件配置：

{ 
  loader: "postcss-loader", 
  options: {
    postcssOptions: {
      plugins: [
        require('autoprefixer')
      ]
    }
  }
}

方式二：单独创建PostCSS配置文件（推荐，更易维护） #

在项目根目录新建postcss.config.js，内容如下：

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

这样Webpack里的postcss-loader不需要额外配置，会自动读取这个文件。

3. 告诉Autoprefixer要兼容哪些浏览器 #

Autoprefixer需要知道你的目标浏览器范围，才能生成对应的前缀。在项目的package.json里加上browserslist字段：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

这个配置表示兼容全球使用率超过1%的浏览器、每个浏览器的最后2个版本，以及还在维护的浏览器（排除已废弃的）。

4. 补全SCSS处理的遗漏点 #

看你原来的SCSS规则，还少了sass-loader！要知道scss文件得先经过sass-loader编译成普通CSS，才能被css-loader和postcss-loader处理。赶紧装上：

npm install sass-loader sass --save-dev
# Yarn版本
yarn add sass-loader sass -D

然后在Webpack的SCSS规则里加上这个loader：

{ loader: "sass-loader" }

5. 别忘了实例化MiniCssExtractPlugin #

你的配置里只引入了MiniCssExtractPlugin，但没在plugins数组里实例化它，这会导致MiniCssExtractPlugin.loader报错。得补上：

plugins: [
  new MiniCssExtractPlugin({ filename: '[name].css' })
]

最后给你完整的修改后配置 #

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: { loader: "babel-loader" } 
      },
      { 
        test: /\.(scss)$/, 
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: {} },
          { 
            loader: "postcss-loader", 
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            } 
          },
          { loader: "sass-loader" }
        ] 
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin(), // 你可能也需要实例化这个插件，不然HTML打包会有问题
    new MiniCssExtractPlugin({ filename: '[name].css' })
  ]
}
module.exports = config;

按上面的步骤来，Autoprefixer肯定就能正常工作了！

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