一、Vite处理静态资源

核心内容：

1. Vite是开箱即用可直接使用静态资源(包括图片文字和json文件之类)
2. 服务端读取图片的参数
3. 设置路径别名

具体步骤：

示例1：在js中import图片资源

// 加载静态图片资源
import sylasPicUrl from "@assets/images/sylas.png"; 
console.log("sylasPicUrl", sylasPicUrl);

const img = document.createElement("img");
img.src = sylasPicUrl;
document.body.append(img);

示例2:导入JSON文件资源

如果你用的不是vite, 在其他的一些构建工具里 json文件的导入会作为一个JSON字符串形式存在

尽量使用解构方便摇树优化

import { name } from "./src/assets/json/index.json";

console.log("jsonFile", name);

服务端读取图片的参数

1.raw

服务端 他会去读取这个图片文件的内容 ---> Buffer 二进制的字符串

2.url

服务端返回图片路径 默认就是url

示例1：读取图片的参数

// 加载静态图片资源
import sylasPicUrl from "@assets/images/sylas.png?raw"; 
const img = document.createElement("img");
img.src = sylasPicUrl;
document.body.append(img);

设置路径别名

示例1：vite配置路径

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
     resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"), // 设置别名, 以后我们在其他组件中可以使用@来代替src这个目录
        }
    }
})

遇到问题

如果有TS文件则需要配置TS

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".", // 默认是当前目录
    "paths": {
      "@const/*":["src/const/*"]
    }
  }
}

二、webpack处理图片和字体

处理代码中引入的图片文件、字体文件

核心内容：

1. 通过 css-loader 处理：css 代码中 url() 引入的图片或字体
2. 通过 资源模块 处理：js 代码中 import 引入的图片或字体

具体步骤：

示例1：在样式中引用图片

1. 基于之前配置过 css-loader 的项目，找一些图片放入 src/assets/images/目录
2. 为页面添加一个元素，并通过样式设置背景图

 <div class="my-img"></div>

<style>
 .my-img {
    width: 200px;
    height: 200px;
    background: url('./images/pic1.png') center center no-repeat;
    background-size: contain;
  }
</style>

3. 执行打包，能看到引用的图片已被放入 dist ，并自动生成了随机文件名

以上功能都是由 css-loader 完成的，它可以处理通过 url()引用的资源

示例2：在 js 中 import 图片资源

1. 在 index.html 中添加元素

<img id="img2" src="" width="200" height="200" />

<script>
// 导入一张图片
import pic2 from './assets/images/pic2.png'

// 将导入的图片设置到 img 标签上
const img2 = document.getElementById('img2')
img2.src = pic2
</script>

2. 处理 import 导入的资源文件，需使用 webpack 内置的特殊 loader：Asset Modules

在 webpack.config.js 中添加规则：

// 通过 Asset Modules 处理以下后缀名的图片或字体文件
{
  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
  type: "asset"
}

【Asset Moduls 的说明】

它其实是 webpack 内置的一种专用于处理静态资源的 loader。type 属性可设置为下列值：

• asset/resource 将资源处理成单独文件，并得到它的 URL 路径
• asset/inline 将资源处理成 data URI 字符串
• asset/source 将资源处理成它的原始内容
• asset 根据文件大小，在处理成 data URI 字符串和单独文件之间自动选择