2021最新webpack5: url-loader处理图片

P14 14-url-loader处理图片

安装

npm i -D url-loader

与url-loader的区别

1. file-loader 会把路径返回
2. url-loader，把要打包的资源，
   1. 以base64URI 的方式扔到代码中去；
   2. 好处，小图片减少HTTP请求

最佳实践

1. url-loader内部也可以调用 file-loader
2. limit 决定什么时候用 url，与file-loader()，
3. 设置示例: limit: 8 *1024

项目资源图

chapter-14/src/imgs on 🌱 master [!+?] 
❯ size
 12K    1.jpeg
 24K    7.jpg

url-loader配置如下

{
  test: /\.jpe?g$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 15 * 1024
      }
    }
  ]
}

参考

• https://www.bilibili.com/video/BV1iv411N7jg?p=14