webpack之自动补齐css前缀,增强项目兼容性(postcss-loader autoprefixer)

通过 postcss-loader 和 autoprefixer 两款插件实现

1、安装两款插件

npm i postcss-loader autoprefixer -D

2、在webpack.prod.js中加入以下配置

            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer') ({
                                    overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    }
                ]
            },

postcss-loader 执行顺序必须保证在 css-loader 之前,建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序:
less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader。其实 postcss-loader 放在 less-loader 之前问题也不大,平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。

其中css-loader和less-loader分别是转化css和less所用,主要区别在于以下部分:

                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer') ({
                                    overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    }

last 2 version为兼容浏览器最后两个版本。

以下是经过插件处理后的样式,display: flex被自动加上多个前缀

.search-text{font-size:20px;color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

 

### 回答1: postcss-loader兼容性处理默认环境是开发环境。在webpack中,postcss-loader的配置如下: ```js { loader: 'postcss-loader', options: { // 在开发环境下使用的插件 plugins: [ require('autoprefixer') ] } } ``` 可以看到,options选项中只配置了在开发环境下使用的插件,没有配置在生产环境下使用的插件。因此,默认情况下,postcss-loader兼容性处理是针对开发环境的。 ### 回答2: Webpack5中的postcss-loader兼容性处理默认环境是开发环境。 PostCSS是一个用JavaScript编写的工具,用于为CSS添加各种插件和工具。postcss-loaderWebpack中使用的一个加载器,用于处理CSS文件,并将其传递给PostCSS进行进一步的处理。 在Webpack5中,默认情况下,postcss-loader兼容性处理是针对开发环境进行的。这意味着在开发环境中,postcss-loader会根据开发环境的要求和配置,自动处理CSS兼容性问题。 在开发环境中,我们通常需要保持较高的开发效率,因此会使用一些开发时专门针对某些浏览器或环境进行了优化的CSS语法或属性,例如使用部分CSS3的新特性。但是这些CSS语法或属性在其他较老的浏览器上可能不被支持,因此在生产环境中需要进行兼容性处理。 而在Webpack5中,postcss-loader兼容性处理默认是针对开发环境进行的。这意味着在开发环境中,postcss-loader会根据配置的兼容性要求,对CSS文件进行像autoprefixer这样的插件的处理,自动CSS添加浏览器厂商前缀,以保证在开发时的效果和开发体验。 需要注意的是,在生产环境中,我们通常需要将CSS文件进行进一步的优化和压缩,同时还需要进行兼容性处理,以确保在不同浏览器和环境下的正常显示。因此,在生产环境中可能需要根据具体的需求和配置,对postcss-loader进行额外的配置和调整,以满足项目兼容性要求。 ### 回答3: 是的,webpack5中postcss-loader兼容性处理默认是在开发环境中进行的。在默认情况下,webpack5会将postcss-loader配置为在开发环境中工作。 在开发环境中,postcss-loader可以通过postcss-preset-env插件对CSS进行自动兼容性处理。postcss-preset-env可以根据目标浏览器的要求,自动添加所需的CSS前缀、转换CSS新特性等,以保证在不同浏览器中的兼容性。 然而,在生产环境中,默认情况下不进行兼容性处理,这是为了提高构建速度和减少文件大小。在生产环境中,通常会将CSS进行压缩和优化,而不进行兼容性处理。这可以通过在webpack配置文件中针对生产环境进行相应的配置来实现。 当然,根据具体需求,我们也可以在webpack配置文件中手动设置postcss-loader的配置选项,来自定义兼容性处理的环境,以适应不同的项目需求。 总结而言,webpack5中postcss-loader兼容性处理默认是在开发环境中进行的,可以通过配置文件来自定义处理的环境。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值