码迷,mamicode.com
首页 > Web开发 > 详细

webpack处理媒体文件(图片/视频和音频)

时间:2018-02-08 13:40:25      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:off   img   处理   blog   css   视频   路径   name   工作   

webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,

这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。

 

            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                // loader: ‘url-loader?name=images/[name].[ext]‘,
                loader: ‘url-loader‘,
                options: {
                  limit: 10,
                  name:‘imgs/[name].[ext]‘
                }
            },
            {
                test: /\.(mp3)(\?.*)?$/,
                loader: ‘url-loader‘,
                options: {
                  name:‘audios/[name].[ext]‘,
                  limit:10
                }
            }        

  

 

webpack处理媒体文件(图片/视频和音频)

标签:off   img   处理   blog   css   视频   路径   name   工作   

原文地址:https://www.cnblogs.com/xhliang/p/8430876.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!