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

- 日理万妓 2022-05-28 12:50 171阅读 0赞

**处理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')) }) ]