url-loader & file-loader-CFANZ编程社区

url-loader & file-loader

url-loader作用：

由于 url-loader 包含了 file-loader 所以，file-loader 内的 option 在 url-loader 中均能使用。

url-loader 不适用的场景：

安装依赖：

npm install --save url-loader file-loader

webpack.config.js 配置文件中添加处理规则：

module：{
    rules：[
        { test: /\.(jpg|png|gif|bmp|jpeg)$/i,//正则表达式匹配图片规则，i忽略大小写
        use: [{
        loader:'url-loader',
        options:{
            limit:8192,//限制打包图片的大小：
            //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
            name:'img/[name].[hash:8].[ext]',//img:图片打包的文件夹；
            //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
            //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
        }
        }]}
    ]
}

url-loader 只处理两种图片引入情况：（注意url-loader的引入必须是相对路径）

React 组件内部直接引入：

import red_png from "./red.png";
<img src = {red_png} />

css 背景图引入：(使用url-loader相对路径，不使用的话需要绝对引用)

background-image: url("./images/blue.png");

只有这两种图片引入方式：

当图片大小小于 limit 时：base64 打包
当图片大小大于 limit 时：file-loader 会起作用，按照参数name: "img/[name].[hash:7].[ext]"复制完之后重命名。打包之后大约是这样子：

js中的路径赋值，例如：

const img=getElementByTagName('img')[0];
img.src="./imges/img.jpg"

请使用：

const img=getElementByTagName('img')[0];
img.src=require("./imges/img.jpg")

参考：
webpack—url-loader解决项目中所有图片打包问题

0 条评论