webpack-使用url-loader处理url 图片

安装 url-loader

npm i url-loader file-loader -D

file-loader 是依赖包。

在images 文件夹放一个图片 ，test.jpg

配置 规则如下：

  module: {//这个节点用于配置所有的第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test: /\.css$/,use:['style-loader','css-loader']}
            //test 代码是匹配规则， 我们用的是.css 需要用 loader 处理。
            ,{test: /\.less$/,use:['style-loader','css-loader','less-loader']}
            //由于less 文件也是一种样式，也是需要用到 css 处理模块
            ,{test: /\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=2200&name=[hash:4]-[name].[ext]']}

        ]

    },

第三个就是配置URL的，

1. 我们匹配的格式比较多 jpg|png|gif|bmp|jpeg ，如果不能满足可以继续添加
2. 'url-loader 用这个处理转化
3. limit=2200， 当图片小于2200bytes 才需要转化为base64编码，
4. name=[hash:4]-[name].[ext]’ 这个是自定义图片的名字， 前四位为hash值后边连接图片的真是名字，ext 后缀的名字

创建 图片的引用

//css 文件加入下边内容
 .box{
            width: 400px;
            height: 400px;
            background: url("../images/test.jpeg");
            background-size: cover;
        }
 //index.html 加入
 <div class="box">


</div>

重新 执行 npm run dev