Webpack 中的 Autoprefixer 没有前缀答案

【问题标题】：Autoprefixer in Webpack not prefixingWebpack 中的 Autoprefixer 没有前缀
【发布时间】：2020-07-23 19:43:43
【问题描述】：

我从头开始整理了我的第一个非常简单的 Webpack 配置。在此我想捆绑 JS 并编译、最小化和自动添加 SCSS。

代码如下所示：

webpack.config.js

const path = require('path');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'application.js',
    path: path.resolve(__dirname, 'assets'),
  },
  module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'application.css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader?-url'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

postcss.config.js

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

在 package.json 我设置了以下内容：

"browserslist": [
    "defaults"
  ],

我没有看到任何前缀，所以我很好奇我做错了什么。我错过了什么吗？

【问题讨论】：

标签： webpack autoprefixer postcss-loader

【解决方案1】：

确保您已在项目中安装了 autoprefixer 作为开发依赖项：

npm i autoprefixer -D

你的 postcss.config.js 应该是这样的：

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

【讨论】：

【解决方案2】：

似乎这一直有效。我只是期待"defaults" 设置创建的前缀比实际的多。将设置更改为 "last 2 versions" 给了我预期的输出。

【讨论】：