开发者社区> 问答> 正文

Webpack中如何处理图片、字体等静态资源文件?

Webpack中如何处理图片、字体等静态资源文件?

展开
收起
迪哒迪滴喵 2024-08-13 18:13:59 85 0
1 条回答
写回答
取消 提交回答
  • Webpack中处理图片、字体等静态资源文件,可以通过url-loader或file-loader来实现。url-loader在文件大小小于限制时,可以返回一个DataURL;文件大小大于限制时,则调用file-loader进行处理。在Webpack配置文件的module.rules中,可以针对不同类型的文件(如.png、.jpg、.gif、.svg、.woff、.ttf等)设置相应的loader。例如,处理图片文件的配置如下:

    { 
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
    use: ["url-loader"], 
    include: [srcDir] // 假设srcDir是源代码目录的变量 
    }
    
    2024-08-13 20:55:06
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
基于webpack和npm的前端组件化实践 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载