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

灰太狼 2022-01-12 10:13 225阅读 0赞

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

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

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

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

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

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

## 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/'
              }
            }
          },

我们发现打包并没有生成图片  
![在这里插入图片描述][20190621171023105.png]  
但是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`：  
![在这里插入图片描述][20190621174915197.png]  
`limit: 204800` 打包`npm run bundle`：  
![在这里插入图片描述][20190621175028946.png]  
没有生成image文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
但是在index.js中可以看到该图片的base64的字符串  
webpack官网上DOCUMENTATION---->LOADERS中的file-laoder和url-loader查看详细介绍

[20190621163600833.png]: /images/20220109/34100d5efbc1441f84c815f830ea42ee.png
[20190621164809352.png]: /images/20220109/3f5b74422b9d42239fea5254858c223d.png
[20190621165413918.png]: /images/20220109/9cc8032b0f5f4a9bbfe31cc9603f9c78.png
[20190621170312115.png]: /images/20220109/72c4f101701e4f8cb33dccaee4c017d5.png
[20190621171023105.png]: /images/20220109/51803cc3f9f345b0b8d1d8dc2aef0c90.png
[20190621174915197.png]: /images/20220109/a736f56cb6484c7a982bddf6b5022a55.png
[20190621175028946.png]: /images/20220109/9a282b6049e94c8faf743eeb0e002e1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220109/2a3078a2ef324ad18ae1c166884b553d.png