Webpack 中的 Autoprefixer 没有前缀

Question

我从头开始整理了我的第一个非常简单的 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"
  ],

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

Answer 1

通过执行以下操作确保您已将 autoprefixer 作为开发依赖项安装在项目中：

npm i autoprefixer -D

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

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

Answer 2

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

Webpack 中的 Autoprefixer 没有前缀

Autoprefixer in Webpack not prefixing

webpack

autoprefixer

postcss-loader