webpack4.x 处理less、sass文件,分离编译后的css，自动添加css前缀,自动消除冗余css 第七节

处理less文件

我们创建一个src/less/a.less文件

@a:red;

#div1{
    color: @a;

    ul{
        li{
            list-style: none;
            height:30px;
            line-height: 30px;
            border-bottom: 1px dashed #000;
        }
    }
}

这时我们就需要相应的loader了

1.安装less和less-loader的模块

cnpm i less less-loader -D

2.引入

在入口文件index.js中引入

import './less/a.less';

3.配置

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:'css-loader',
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader'] // 编译顺序从右往左
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    outputPath:'images' //定义输出的图片文件夹
                }
            }]
        }
    ]
},

分离less编译后的css文件

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:'css-loader',
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            })
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    outputPath:'images' //定义输出的图片文件夹
                }
            }]
        }
    ]
},

---

处理sass文件

1.安装sass和sass-loader

cnpm i node-sass sass-loader -D

创建一个src/sass/a.sass文件

$color:green;

#div2{
    color: $color;
}

-

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:'css-loader',
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            })
        },
        {
            test:/\.(sass|scss)$/,
            use:['style-loader','css-loader','sass-loader']
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    outputPath:'images' //定义输出的图片文件夹
                }
            }]
        }
    ]
},

---

自动添加css前缀

postCss 预处理器

专门处理css平台

1.下载

cnpm i postcss-loader autoprefixer -D

2.准备建一个 postcss.config.js文件 配置postcss的

module.exports = {
    plugins:[
        require('autoprefixer') // 自动添加css前缀
    ]
}

3.配置postcss-loader,自动添加css前缀

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:[
                    {loader:'css-loader'},
                    {loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
                ],
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            })
        },
        {
            test:/\.(sass|scss)$/,
            use:['style-loader','css-loader','sass-loader']
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    outputPath:'images' //定义输出的图片文件夹
                }
            }]
        }
    ]
},

---

自动消除冗余的css代码

使用Purifycss

1.下载

cnpm i purifycss-webpack purify-css -D

2.引入插件

const PurifyCssWebpack = require('purifycss-webpack');

3.需要引入一个额外模块,glob扫描路径

cnpm i glob -D

4.引入glob

const glob = require('glob');

5.在plugins里面配置

plugins:[
    // Uglify是压缩js,现在已经不需要了,只需要在script里面写成
    // "build": "webpack --mode production", 就自动压缩额
    //new Uglify(),  
    new Webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        title:'Hello World',
        template: './src/index.html' //模板地址
    }),
    new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
    new PurifyCssWebpack({ //消除冗余代码
        // 首先保证找路径不是异步的,所以这里用同步的方法
        // path.join()也是path里面的方法,主要用来合并路径的
        // 'src/*.html' 表示扫描每个html的css
        paths:glob.sync(path.join(__dirname,'src/*.html')) 
    })
]