webpack 图片处理

三种引入图片的方式：

1在 js 中创建 Image 实例引入

把图片当做模块引入

javascript

import logo from "./logo.png"
let img = new Image()
img.src = 'logo'
document.body.appendChild(img)

使用 file-loader，默认在内部生成一张图片到 build 目录下，返回生成的图片名字

javascript

{
  test: /\.(png|jpg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        esModule: false
      }
    }
  ]
},

2在 css 中引入 background: url( )

css

div{
    background: url(./logo.png)
}

然后把 css 文件当做模块引入到入口文件 index.js，import css 文件时候自动调用 file-loader

3HTML <img src="" alt="">引入

HTML<img src="./log.png">直接打包的话由于不是模块引入，build 中的 src 路径是错误的

同时使用 html-withimg-loader 和 file-loader 改变 build 后<img>的 src

javascript

{
  test: /\.html$/,
  use: 'html-withimg-loader'
},
{
  test: /\.(png|jpg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        esModule: false
      }
    }
  ]
},

使用 url-loader 处理图片，前两种引入方式都适用

处理图片经常使用 url-loader，当我们的图片小于多少 k 的时候，用 base 64 来转化，否则使用 file-loader 产生真实的图片

base64 编码可以将一张图片编码成字符串，编码后大小略有增加，但可以减少 http 请求

javascript

{
  test: /\.(png|jpg|gif)$/,
  use:{
    loader:'url-loader',
    options: {
      limit: 1, // 超过限制使用 file-loader
      outputPath: './img/',
      esModule: false
    }
  }
},

参考

webpack loader 从上手到理解系列：url-loader