前端 webpack（13）处理样式兼容问题和压缩css文件

前言

之前处理了JS的兼容问题，将高级语言转换成浏览器能识别的语言，同样的，在不同的浏览器，甚至不同版本的浏览器的之间样式也会存在兼容性的问题，现在我们就来解决样式的兼容性问题。

webpack中提供了一个loader来解决：postcss-loader 1、下载依赖,postcss-loader依赖于postcss，postcss-loader需要使用postcss-preset-env来进行智能预设，决定样式如何进行兼容。

npm install --save-dev postcss-loader postcss postcss-preset-env

2、基本使用，postcss-loader需要在css-loader的下一层，less-loader和scss-loader的上一层，顺序不能弄错。因为样式配置有好几个，代码重复比较多，抽出来减少代码量。

// 封装一个样式loader处理的方法，减少重复性代码

const getCssLoader=function(prePaser){

return [

MiniCssExtractPlugin.loader,

'css-loader',

// 如果默认配置就可以直接写loader就可以了，但是需要配置的就要写成对象形式

// 在options中写想要的配置

{

loader: 'postcss-loader',

options: {

postcssOptions: {

plugins: [

[

'postcss-preset-env',//这个就能解决大多数样式兼容性问题

],

],

},

}

},

prePaser,

].filter(Boolean);//[].filter(Boolean)方法，过滤掉undefined，空字符串等为false的数据

}

几个样式的rules配置

{

test: /\.css$/,//匹配.css后缀名字的文件

use: getCssLoader(),

},

{

test: /\.less$/,

use: getCssLoader('less-loader'),

},

{

test: /\.s[ca]ss$/,

use: getCssLoader('sass-loader'),

},

1）没有配置样式兼容时，使用8位数表示背景颜色加透明度，无法转成ragb

2）配置后

要想具体设置兼容的参数，在package.json中添加，下面的配置取得是交集。

"browsersList": [

"last 2 version",//兼容浏览器最新两个版本

">1%",//兼容99%的浏览器

"not dead",//标记已死的浏览器不要

]

压缩css代码

之前单独打包的css代码是没有经过压缩的，要是生产环境，压缩的代码可以减少资源的使用，减少加载的时间。

webapck提供了插件CssMinimizerWebpackPlugin 下载依赖：

npm install css-minimizer-webpack-plugin --save-dev

引入插件：

const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//引入压缩css的插件

在plugins中配置插件：

new cssMinimizerWebpackPlugin(),

打包生产后的代码就是压缩过的：

参考阅读