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

使用loader打包静态资源（图片篇）

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

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

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

[ext]：表示原始文件的后缀
[name]：表示原始文件的名字
[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查看详细介绍

来源：CSDN

作者：_dalianmiao

链接：https://blog.csdn.net/hani_wen/article/details/93203989

标签

Webpack

base64

url-loader