Loader打包图片

在这一章里面我们会对打包图片进行更详细的讲解。
主要讲file-loader 以及 url-loader

自定义命名

我们在打包的时候其实已经发现，打包后的命名是一长串字符。 如果我们希望打包出来的照片按照我们的命名。 我们可以使用占位符，如下操作

placeholders占位符

// node.js的文件模块
const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    // rules可以多个，所以他是个数组
    rules:[
      {
        // 目前只能打包jpg,如果希望打包其他格式的图片
        // test: /\.jpg$/, 使用的是正则表达式
        test: /\.(jpg|png|gif)$/,
        use:{
          loader: 'file-loader',
          // 这里的意思是保留原来的名字还有后缀
          options: {
            // 使用占位符
            name:'[name].[ext]'
            // 也可以使用多个占位符
            // name:'[name][hash].[ext]'
            // name:'[name]_[hash].[ext]'
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

我们已经可以看到打包的文件还是保留原来的文件了

打包的位置

:::info 现在我们打包的位置是直接在dist目录下的，如果希望是在dist的images下。
应该怎么实现。 :::

使用options中的outputPath属性。

// node.js的文件模块
const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    // rules可以多个，所以他是个数组
    rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          loader: 'file-loader',
          // 这里的意思是保留原来的名字还有后缀
          options: {
            name:'[name]_[hash].[ext]',
            // 放在dist - images里
            outputPath: 'images/'
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

图片依然可以正确显示

其实看到这里，我们会发现file-loader的参数非常多。
所以看官网非常重要。

url-loader

:::info url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。 :::

const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          // 首先需要安装 npm install url-loader --save-dev
          loader: 'url-loader',
          options: {
            name:'[name]_[hash].[ext]',
            outputPath: 'images/'
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

打包成功了，但是，我们发现了一个问题，图片去哪了，我们再看看页面发现他还是可以正常显示图片


然后我们打开bundle.js,发现图片变成了base64的格式

分析 :::info

1. 当我们打包图片的时候，我们使用了url-loader
2. 他和file-loader不一样，他会把图片转换成base64的字符串
3. 然后直接放在bundle.js里面，而不是单独生成一个images文件 ::: 但是这样明显是不合理的：

   首先我们讲讲好处： 图片打包在js里面，那么实际上把js加载好了，页面就出来了。 他不需要额外去请求图片的地址，节省一次http请求 但是带来的问题是： 如果这个文件特别的大，打包生成的js文件也就会特别的大，那么加载的js的时间就会很长。 所以加载的时间里面，页面什么都显示不出来。

:::info 所以他的最佳使用方式是什么：
如果我们的图片非常的小，假如只有1、2kb, 那么就是非常好的选择。
如果图片很大，那么使用file-loader的方式会更合适。 :::

那如何使用这种最佳选择

:::info 他提供了一个limit作为限制，可以完成file-loader的功能。 :::

const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          // 首先需要安装 npm install url-loader --save-dev
          loader: 'url-loader',
          options: {
            name:'[name]_[hash].[ext]',
            outputPath: 'images/',
            // 使用limit进行限制, 如果图片大小超过了2048个字节
            // 那么就会像file-loader一样打包到dist目录下生成一个images/文件夹
            // 如果图片少于2kb的时候，那么就会用base64字符串放到bundle.js里面
            limit: 2048 // 2kb
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

我们会发现，因为我们图片大于2kb，所以自然会放到images里面。

这个时候，我们把limit的值调到2m,就会发现我的图片会转成base64字符串

const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          // 首先需要安装 npm install url-loader --save-dev
          loader: 'url-loader',
          options: {
            name:'[name]_[hash].[ext]',
            outputPath: 'images/',
            // 使用limit进行限制, 如果图片大小超过了2048个字节
            // 那么就会像file-loader一样打包到dist目录下生成一个images/文件夹
            // 如果图片少于2kb的时候，那么就会用base64字符串放到bundle.js里面
            limit: 2048000// 2m
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}