Powered by md-Blog  文 - 篇  访客 -

【文件资源】file-loader


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

推荐

只使用 url-loader 即可

定义

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

区别

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

安装

yarn add file-loader -D

配置

webpack.config.js
module:{
    rules:[
        {
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }
        }
    ]
}

测试

index.js
// file-loader
import qqImg from './assets/qq.png';
console.log(qqImg);
document.write(qqImg);
const myQQ = `<hr><img src='${qqImg}'><hr>`;
document.write(myQQ);

不要删除

小站不易,感谢支持!