轻装上阵：Webpack 5 & Vite资源优化

• 作者简介：大家好，我是文艺理科生Owen，某车企前端开发，负责AIGC+RAG项目
• 目前在卷的技术方向：工程化系列，主要偏向最佳实践
• 希望可以在评论区交流互动，感谢支持~~~

上一篇我们从0开始构建了webpack的最小化项目，分别举例说明了ES6语法、css语法、typescript语法和tsx语法的编译转换。

在实际的项目开发中，存在多种类型的静态文件，如图片、文本文件、字体文件等。在webpack4中，需要引入对应的loader去逐个解决。但在webpack5中，有更为简便的使用方式。相应的，文章后面也会列举vite的静态资源模块的最佳实践。

webpack5中处理资源模块

静态资源模块（Asset Modules）

回顾webpack4中，处理静态资源需要使用 raw-loader、url-loader、file-loader等。但在webpack5中，可以使用内置的静态资源模块更方便地处理静态资源。

其中有4种静态资源模块类型。

webpack5	用途	替代webpack4的loader名称
asset/resource	导出静态资源的独立文件到输出目录中，并导出独立文件的url	file-loader
asset/inline	导出静态资源的data URI	url-loader
asset/source	导出静态资源的源代码	raw-loader
asset	在 导出静态资源的 data URI 和 单独文件 自动选择	url-loader

接着上一篇文章的 demo，稍作一些修改，当前目录为：

├─ package.json
├─ pnpm-lock.yaml
├─ README.md
├─ src
│  ├─ index.js
│  └─ index.txt
└─ webpack.config.js

// index.txt
webpack

// package.json
{
   
  "name": "demo",
  "version": "1.0.0",
  "description": "V6.0.0 从零到一搭建项目脚手架，梳理工程化中构建的来龙去脉",
  "main": "index.js",
  "scripts": {
   
    "dev": "webpack --mode development --config webpack.config.js"
  },
  "keywords"