Webpack-6【Less-Sass、postcss、图片处理】

一.Less-Sass

Less: 是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin,函数等特性

Sass:是成熟、稳定、强大的CSS扩展语言

npm install less less-loader -D
npm install node-sass sass-loader -D

module:{
    rules:[{
        test:/\.less$/,
        use:[{
            loader:'style-loader'
        },{
            loader:'css-loader'
        },{
            loader:'postcss-loader'
        },{
            loader:'less-loader'
        }]
    }]
}

二.postcss

1.把CSS解析成JavaScript可以操作抽象语法树结构

2.postCSS是一款使用插件去转化CSS的工具

3.常用插件

Autoprefixer:为CSS中的属性添加浏览器特定的前缀

postcss-cssnext:使用CSS将来版本中可能会加入的新特性

cssnano:压缩优化css

npm i postcss postcss-cssnext cssnano  autoprefixer postcss-loader-D

a.css

.box{
    width:400px;
    height:400px;
    background-color:red;
    transition:width .2s liner;
    transform:rotate(10deg);
}

module:{
    rules:[{
        test:/\.css$/,
        use:[{
            loader:'style-loader'
        },{
            loader:'css-loader'
        },{
            loader:'postcss-loader'
        }]
    }]
}

postcss.config.js

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}
.box{
    width:400px;
    height:400px;
    background-color:red;
    -webkit-transform:rotate(10deg);
            transform:rotate(10deg);
}

指定运行环境

module.exports = {
    plugins:[
        require('autoprefixer')({
            browsers:['last 2 versions']
        })
    ]
}

.box{
    width:400px;
    height:400px;
    background-color:red;
     -webkit-transition:width .2s linear;
            transition:width .2s linear;
    -webkit-transform:rotate(10deg);
            transform:rotate(10deg);
}

压缩代码

plugins:[
    require('postcss-cssnext'),
    require('cssnano')
]

三.图片处理

url-loader:会将引入的图片编码，根据需求选择性的把某些小图片编码成base64格式写进页面，从而减少服务器请求，优化新能

增强版的file-loader

url-loader工作分两种情况:

1.文件大小小于limit参数，url-loader将会把文件转为DataUrl;

2.文件大小小于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader.因此我们只需要安装url-loader即可。

npm i file-loader url-loader -D

module:{
    rules:[{
        test:/\.(png|jpg|jpeg|gif)/,
        use:[{
            loader:'url-loader',
            options:{
                name:"[name].[ext]",
                limit:10000,
                outputPath:'assets/imgs'
            }
        }]
    }]
}

index.html

a.scss

index.js

let app = document.getElementById('app');
app.innerHTML = "<div class=item1></div><div class=item2></div><div class=item3></div><div class=item4></div>"

压缩图片

npm i image-webpack-loader -D

{
    loader:"image-webpack-loader",
    options:{
        pngquant:{
            quality:'80',
            speed:4
        }
    }
}