webpack核心概念_(第三章)_使用loader打包静态资源(图片篇)

最后都变了- 提交于 2019-12-21 20:15:08

使用loader打包静态资源(图片篇)

上一节我们看到webpack 把图片名字被打包成了一个比较长的字符串。
在这里插入图片描述
如果我们想不变动图片的名字,怎么办?
这样的话我们需要对loader做一些额外的配置了。
在使用loader的时候,可以配置一些参数,放在一个options的配置项
比如说希望打包生成的名字形式跟之前图片的名字一致,后缀也一模一样

      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: '[name].[ext]'
          }
        }
      },

在这里插入图片描述
这样我们打包后的名字就不会变了
name: '[name].[ext]' 这种配置的语法,我们叫做placeholder,即占位符
file-loader对应的占位符有很多:

  1. [ext]: 表示原始文件的后缀
  2. [name]: 表示原始文件的名字
  3. [hash]: 表示打包出来后文件的hash值 name: '[name]_[hash].[ext]' 打包出来之后就是
    在这里插入图片描述
    也就是说不配置的时候,默认打包出的名字就是hash值

我们可以看到打包文件默认在dist文件下,我们想打包到dist下image文件下,要怎么做?
可以在这里配置一下outputPath: 'images/',意思是遇到jpg结尾的模块,打包的时候,会把这个文件打包生成到dist目录下的images文件夹中
在这里插入图片描述

url-loader

url-loader除了可以做file-loader的工作之外,还可以做一下额外的事情,安装npm install url-loader -D

      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/'
          }
        }
      },

我们发现打包并没有生成图片
在这里插入图片描述
但是index.html可以成功运行,在打包生成的index.js中
在使用url-loader打包图片的时候,它会把图片转换成base64的字符串,然后直接放在打包生成的index.js文件中,而不是单独生成一个文件,但是这样使用是不合理的,图片打包在js文件中,实际上加载好了js ,不用再额外的去请求图片的地址,省了一次http请求,但是问题是如果这个图片文件特别大,打包生成的js文件也会特别特别的大,加载这个js的时间就会很长,所以再很长的时间里页面上什么都不会显示来。
所以最佳使用url-loader的方式是,当图片非常的小,比如说1、2KB,那么这个图片以base64的形式打包到js文件是一个非常好的选择,没有必要让一个小图片重新去发送一个http请求,浪费时间,假设图片很大的话,就像file-loader一样,把图片打包到dist文件下。
要想实现这种实践怎么办呢?在options配置参数limit: 2048,意思是如果图片超过了2048个字节,那么就会像file-loader一样,打包到dist目录下,生成一个图片,如果小于2048个字节,那么会直接把图片变成base64的字符串放到生成的index.js文件中
测试:limit: 20480 打包npm run bundle
在这里插入图片描述
limit: 204800 打包npm run bundle
在这里插入图片描述
没有生成image文件
在这里插入图片描述
但是在index.js中可以看到该图片的base64的字符串
webpack官网上DOCUMENTATION---->LOADERS中的file-laoder和url-loader查看详细介绍

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!