Powered by md-Blog  文 - 篇  访客 -

【文件资源】url-loader


更新:2020-03-24 16:26:24  /  创建:2020-03-18 11:22:25  /  分类:Webpack  / 
不要删除

推荐

只使用 url-loader 即可

定义

  • file-loader 返回的是图片的 url
  • url-loader 可以通过 limit 属性对图片分情况处理,当图片小于 limit(单位:byte)大小时转base64,大于 limit 时调用 file-loader 对图片进行处理。

区别

  • 相同点:都是在 Webpack 中处理图片、字体图标等文件。
  • 关系:url-loader 封装了 file-loader,但url-loader 并不依赖于 file-loader

安装

依赖 file-loader
yarn add url-loader file-loader -D

配置

webpack.common.js
module:{
    rules:[
        {
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10240,
                    name: 'static/images/[name].[ext]',
                }
            }
        }
    ]
}

测试

index.js
  • qq.png 为大于 10kb 的图片
  • bd.png 为小于 10kb 的图片
// file-loader
import qqImg from './assets/qq.png';
console.log(qqImg);
document.write(qqImg);
const myQQ = `<hr><img src='${qqImg}'><hr>`;
document.write(myQQ);

// url-loader
import bdImg from './assets/bd.png';
console.log(bdImg);
document.write(bdImg);
const myBd = `<hr><img src='${bdImg}'><hr>`;
document.write(myBd);

打包后的结果:

qq.png
src/assets/qq.png
bd.png
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAABCCAYAAAAWhkkdAAAAAXNSR0IArs4c6QAAGSlJREFUeAHtXQl8FEW6r+qezCSQBAQBhUwCgkcSDmU4PJF9y+P3eCquB/rUVVz9ra7iW/d5PQ/...

img

不要删除

小站不易,感谢支持!