（十二）处理图片文件

步骤十二

处理图片文件

对于图片文件,webpack4使用file-loader和url-loader来处理的,但webpack5不使用这两个loader了,而是采用自带的asset-module来处理

1. 修改webpack.base.js,添加图片解析配置

module.exports = {
  module: {
    rules: [
      // ...
      {
        test:/.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件
        type: "asset", // type选择asset
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb转base64位
          }
        },
        generator:{ 
          filename:'static/images/[name][ext]', // 文件输出目录和命名
        },
      },
    ]
  }
}

测试一下,准备一张小于10kb的图片和大于10kb的图片,放在src/assets/imgs目录下,

2. 修改App.tsx:

import React from 'react'
import smallImg from './assets/images/2021logo.svg'
import bigImg from './assets/images/snipaste.jpg'
import './app.css'
import './app.less'

function App() {
  return (
    <>
      <img src={smallImg} alt="小于10kb的图片" />
      <img src={bigImg} alt="大于于10kb的图片" />
    </>
  )
}
export default App

这个时候在引入图片的地方会报：找不到模块“./assets/imgs/22kb.png”或其相应的类型声明，需要添加一个图片的声明文件

3. 新增src/images.d.ts文件，添加内容

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
declare module '*.less'
declare module '*.css'

添加图片声明文件后,就可以正常引入图片了, 然后执行npm run build:dev打包,借助serve -s dist查看效果,可以看到可以正常解析图片了,并且小于10kb的图片被转成了base64位格式的。

4. css中的背景图片一样也可以解析,修改app.tsx。

import React from 'react'
import smallImg from './assets/images/2021logo.svg'
import bigImg from './assets/images/snipaste.jpg'
import './app.css'
import './app.less'

function App() {
  return (
    <>
      <img src={smallImg} alt="小于10kb的图片" />
      <img src={bigImg} alt="大于于10kb的图片" />
      <div className='smallImg'></div> {/* 小图片背景容器 */}
      <div className='bigImg'></div> {/* 大图片背景容器 */}
    </>
  )
}
export default App

5. 修改app.less

// app.less
#root {
  .smallImg {
    width: 75px;
    height: 75px;
    background: url('./assets/images/2021logo.svg') no-repeat;
    background-size: contain;
  }

  .bigImg {
    width: 232px;
    height: 154px;
    background: url('./assets/images/snipaste.jpg') no-repeat;
    background-size: contain;
  }
}

可以看到背景图片也一样可以识别,小于10kb转为base64位。