webpack中的加载器,处理css兼容性前缀,处理打包样式中的图片以及字体文件 - 前端笔记-一,处理css兼容性,自动添加前缀 安装post-css自动添加css的兼容性前缀(-ie-,-webkit-) 1).安装包 npm install postcss-load...

学习笔记

点滴记忆
回忆过往
首页>> >>webpack中的加载器,处理css兼容性前缀,处理打包样式中的图片以及字体文件 - 前端笔记
一,处理css兼容性,自动添加前缀

安装post-css自动添加css的兼容性前缀(-ie-,-webkit-)
1).安装包
    npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

二,处理图片和字体文字

打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件,一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
    npm install url-loader file-loader -D
2).配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数,只有小于limit值的图片,才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » webpack中的加载器,处理css兼容性前缀,处理打包样式中的图片以及字体文件
版权所有:《前端笔记
文章标题:《webpack中的加载器,处理css兼容性前缀,处理打包样式中的图片以及字体文件
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-53.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)