4、webpack打包图片的两种loaderloader是webpack的模块打包方案。webpack 可以使用 loa

loader是webpack的模块打包方案。webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。

两款常用图片loader

file-loader 将文件发送到输出文件夹，并返回（相对）URL url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL

我们还是通过实例来学习一下这两个loader

实例场景：在页面引入一个图片。代码如下：

import logo from './logo.jpg';

let img = new Image();
img.src = logo;

let root = document.getElementById('root');
root.append(img);

1、file-loader

安装file-loader

npm install file-loader --save-dev

webpack.config.js文件内容配置如下：

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/, // 针对这三种格式的文件使用file-loader处理
        use: {
          loader: 'file-loader',
          options: {
            // 定义打包后文件的名称；
            // [name]:原文件名，[hash]:hash字符串（如果不定义名称，默认就以hash命名，[ext]:原文件的后缀名）
            name: '[name]_[hash].[ext]', 
            outputPath: 'images/' //  定义图片输出的文件夹名（在output.path目录下）
          }
        }
      }
    ]
  }
}

打包后图片后被打包到dist/images文件夹下，生成的html代码如下：

<div id="root">
  <img src="images/logo_914580cb1a643ea14ad3b8a252b69f51.jpg">
</div>

2、url-loader

url-loader和file-loader的作用类似一样，但是url-loader不同的是，默认的是把图片转换为base64存储在打包的js文件中。也可以通过设置limit字段来控制图片低于多少字节后才打包到js文件中，超过的话和file-loader的打包方式一样。可以理解为url-loader是file-loader的增强版。

安装url-loader

npm install url-loader --save-dev

webpack.config.js文件内容配置如下：

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/, // 针对这三种格式的文件使用file-loader处理
        use: {
          loader: 'file-loader',
          options: {
            // 定义打包后文件的名称；
            // [name]:原文件名，[hash]:hash字符串（如果不定义名称，默认就以hash命名，[ext]:原文件的后缀名）
            name: '[name]_[hash].[ext]', 
            outputPath: 'images/', //  定义图片输出的文件夹名（在output.path目录下）
            limit: 204800 // 大于200kb的图片会被打包在images文件夹里面，小于这个值的会被以base64的格式写在js文件中
          }
        }
      }
    ]
  }
}

file-loader 和 url-loader的比较

file-loader: 将文件打包到输出路径，并将打包后的路径返回。 url-loader：文件大于limit设置的值（单位为字节）时，和file-loader打包的方式一样。但如果文件小于limit设置的值时，不会将文件打包到输出路径，而是将文件内容转成base64的字符串放在js文件中。

url-loader的优缺点

【缺点】：如果把大文件图片打包成base64的字符串放到js文件中，将会影响js文件的加载。

【优点】： 1、可以把很多小图打包base64字符串放到js文件中，减少文件的请求次数。 2、可以通过设置limit的值，只把小图打包成base64字符串放到js中去，大图还打包到指定路径中。这也就解决了上面说的缺点的问题。