url-loader与file-loader

一开始用url-loader的时候,想着为什么npm run build的时候,不能将图片打包到build images的目录下,原来,没有自己看这样的说明:

loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用,
limit参数,代表如果小于大约8k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录

这样在小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。

忽略了这样的说明。
理解了这些就知道,url-loader是通过limit这样的一个值的大小,来判断,小于其值的转base64,大于其值的打包到相应的生产目录下;
而file-loader是直接将图片打包到生产目录下。
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=assets/images/[hash:8].[name].[ext]'
                //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
                //name后面是打包后的路径;
                //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用
                //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。
            }

原文地址:https://www.cnblogs.com/wang715100018066/p/7268277.html