webpack对图片文件进行打包（代码演示和讲解）

图片在webpack中会被当做模块，但是webpack本身无法处理图片，我们需要对应的 loader

代码目录：
在这里插入图片描述
演示代码下载链接：https://webchang.lanzous.com/i1NH0kfu4ti 密码:gq4b

使用url-loader

我们在normal.css文件中使用img文件夹下的图片当做背景图片（对于css文件的处理已经提前配置好了）

body {
    
    
  background-image: url("../img/2.png");
}

如果我们现在直接打包，会报错。

查阅官网 https://www.webpackjs.com/loaders/url-loader/ ，发现我们需要安装 url-loader

npm install --save-dev url-loader

接下里在webpack.config.js文件中进行下面的配置：

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(png|jpg|gif)$/,
        use: [
          {
    
    
            loader: 'url-loader',
            options: {
    
    
              limit: 8192 //对图片的大小做限制，8kb
            }
          }
        ]
      }
    ]
  }
}

当我们安装了 url-loader 时，webpack在加载图片的时候会先将图片的大小和 limit 的限制大小做一个比较。

测试一

我们使用的 2.png图片的大小小于8kb，打包后在index.html文件中引入打包生成的bundle.js文件，发现html文件显示正常

在这里插入图片描述

结论：当加载的图片，小于limit时(如果limit是8192，那么8192 = 1024 * 8，就是8kb)，会直接使用 url-loader 对图片进行加载，并将图片编译成base64的字符串形式，此时不需要一个单独的文件来存储该图片。

测试二

我们在css文件中使用1.jpg图片，该图片的大小大于8kb。

body {
    
    
  background-image: url("../img/1.jpg");
}

重新打包运行，发现报错了。原因在于我们使用的图片大小超过了在 webpack.config.js中配置的url-loader的limit的大小。提示我们项目中缺少 file-loader
在这里插入图片描述
所以，我们需要安装file-loader。

npm install --save-dev file-loader

结论：如果加载的图片的大小大于 limit时，需要使用file-loader，而file-loader不需要特别配置，只需要安装一下就可以了。

我们重新进行打包，发现在dist文件夹下多了一个图片文件，这个图片就是我们刚使用的图片，它的名字通过hash自动生成的，是唯一的。但是此时index.html文件不能识别图片，通过路径我们可以看出来它会在项目根目录下寻找这个图片，但是此时打包后的图片在dist文件夹下。如图：
在这里插入图片描述

在这里插入图片描述
我们需要进行配置来解决这个问题：

在 webpack.config.js 文件中的 output属性里增加一条配置

publicPath:"dist/"

在这里插入图片描述
接下里重新进行打包，运行，正常。

图片文件处理 – 修改文件名称

我们发现webpack自动帮助我们生成一个非常长的名字

这是一个32位hash值，目的是防止名字重复
但是，真实开发中，我们可能对打包的图片名字有一定的要求
比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

只需要在 url-loader的配置中加一条：
在这里插入图片描述
重新打包运行，发现dist文件夹下多了一个img文件夹，img文件夹下放置打包后的图片