webpack 使用postcss 和autoprefixer

本文只是一个问题的记录，并不适合初学者的学习

在webpack4中使用postcss+autoprefixer，为样式添加前缀

第一种方法，在配置文件中配置postcss和autofixer，并配置适配浏览器范围

//style
            {
                test: less_re,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')({
                                    overrideBrowserslist: [   //这里autoprefixer 改成了这个
                                        "defaults",
                                        "not ie < 11",
                                        "last 2 versions",
                                        "> 1%",
                                        "iOS 7",
                                        "last 3 iOS versions"
                                    ]
                                })
                            ]
                        }
                    }，
　　　　　　　　　　　　'less-loader',

] },

 

 

第二种在与package.json统计别目录下增加一个

".browserslistrc" 文件

// .browserslistrc
defaults
not ie < 11
last 2 versions
> 1%
iOS 7
last 3 iOS versions

或者在package.json中添加一个browserlist配置项

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

请注意如果配置完之后，打包没有出现问题，但是style文件没有成功添加浏览器前缀，那么90%的可能就是 上面说的浏览器适配配置出现了问题，以上的配置display是会出现前缀的。

 

配置方法还有很多中，只要有效都行，上面两种只是通用一些并非绝对