webpack需通过loader处理css和图片等非js资源：css用css-loader解析、style-loader注入；图片用file-loader复制或url-loader转base64；字体/音视频等静态资源同理配置对应正则和loader即可。
Webpack 本身只认识 JavaScript 和 JSON，处理 CSS 和图片这类资源必须靠 Loader。核心思路是：匹配文件类型 → 指定对应 Loader → 按顺序执行转换。配置写在 module.rules 里，关键在 test 正则和 use 数组。
CSS 文件：用 css-loader + style-loader 配合
css-loader 负责解析 CSS 内容（比如 @import、url()），把它转成 JS 模块；style-loader 把这个模块内容动态注入到 HTML 的 <style></style> 标签中，让样式真正生效。
- 安装依赖：
npm install --save-dev css-loader style-loader - 在
webpack.config.js的rules中添加：{ test: /\.css$/i, use: ['style-loader', 'css-loader'] } - 注意执行顺序：数组从右往左，
css-loader先运行，输出结果再交给style-loader - JS 中直接引入：
import './styles/main.css';，打包后样式会自动挂载到页面
图片文件：用 file-loader 或 url-loader
file-loader 把图片复制进输出目录，并返回最终路径；url-loader 在此基础上多一个功能：小图自动转 base64 字符串，减少 HTTP 请求。
- 安装依赖（选其一）：
npm install --save-dev file-loader或npm install --save-dev url-loader - 基础配置（file-loader）：
{ test: /\.(png|jpe?g|gif|svg)$/i, use: ['file-loader'] } - 增强配置（url-loader，小于 10KB 转 base64）：
{ test: /\.(png|jpe?g|gif|svg)$/i, use: [{ loader: 'url-loader', options: { limit: 10240 } }] } - 图片可在 JS 中导入：
const imgSrc = require('./assets/logo.png');，也可在 CSS 中通过background: url(./icon.png)引用
字体等其他静态资源可复用相同逻辑
字体（.woff、.ttf）、音视频（.mp4、.webm）等，只要改 test 正则匹配对应后缀，用 file-loader 或 url-loader 处理即可。例如字体配置：
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, use: ['file-loader'] }
Webpack 会把它们拷贝进 dist，并在代码中返回正确路径。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
