Webpack 只识别 JS 和 JSON，其他资源需 loader 转为 JS 模块；CSS 用 css-loader 解析、style-loader 插入样式；图片等静态资源用 url-loader（含 base64 转换）或 file-loader；字体、音视频、自定义后缀同理；自定义 loader 是导出处理函数的 JS 文件。
Webpack 本身只认识 JavaScript 和 JSON，所有其他资源——比如 CSS、图片、字体、SVG、甚至自定义后缀文件——都必须靠 loader 转换成 JS 模块才能被识别和打包。核心就三点：匹配文件类型、指定 loader、按顺序执行转换。
处理 CSS 样式：css-loader + style-loader 协作
单独引入 CSS 文件会报错“Module parse failed”，因为 Webpack 不懂 CSS 语法。必须用两个 loader 配合：
-
css-loader：解析 CSS 内容（如
@import、url()），把样式转成 JS 模块导出； -
style-loader：接收 css-loader 的输出，动态创建
<style></style>标签并插入到页面中，让样式真正生效。
安装与配置：
npm install --save-dev css-loader style-loader
在 webpack.config.js 的 module.rules 中添加：
立即学习“Java免费学习笔记（深入）”；
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] }注意：use 数组从右往左执行，所以 css-loader 先运行，再交给 style-loader。JS 中可直接 import './index.css'，无需手动 link。
处理图片资源：url-loader 或 file-loader
图片不能直接被 JS 引入，loader 要么把它转成 base64 字符串（小图优化），要么复制进输出目录并返回路径。
-
url-loader：内置
file-loader功能，加了limit选项。小于设定值（如 10KB）自动转 base64；超限则退化为file-loader行为； -
file-loader：单纯拷贝文件到
dist，返回最终路径字符串，适合大图或需 CDN 托管的场景。
安装与配置（推荐 url-loader）：
npm install --save-dev url-loader
规则示例：
{ test: /\.(png|jpe?g|gif|svg)$/i, use: [{ loader: 'url-loader', options: { limit: 10240 } }] }使用方式灵活：
– JS 中：const logo = require('./logo.png');
– CSS 中：background: url('./icon.svg');
两者都会被正确解析并打包。
处理字体、音视频等静态资源
逻辑完全一致，只需改 test 正则匹配对应后缀，复用 file-loader 或 url-loader 即可。
常见配置示例：
// 字体
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, use: ['file-loader'] }
<p>// MP4/WEBM 视频
{ test: /.(mp4|webm|ogg)$/i, use: ['file-loader'] }</p><p>// 自定义后缀（如 .md、.txt）
{ test: /.md$/i, use: ['raw-loader'] } // 返回原始字符串
关键点：只要 loader 支持该类型（或你写了自定义 loader），Webpack 就能把它当模块 import。例如 import readme from './README.md'; console.log(readme); 就能拿到内容。
编写一个简单自定义 loader
loader 本质是一个导出函数的 JS 文件，接收源文件内容，返回处理后的 JS 字符串。
例如写一个把 HTML 注释全部移除的 loader（remove-comment-loader.js）：
module.exports = function(content) {
// 移除 <!-- ... -->
const noComment = content.replace(/<!--[\s\S]*?-->/g, '');
// 返回 JS 模块：导出字符串
return `export default ${JSON.stringify(noComment)};`;
};使用时，在 rules 中引用绝对或相对路径：
{ test: /\.html$/, use: ['./loaders/remove-comment-loader'] }更复杂场景可用 this.async() 处理异步操作，或借助 loader-utils 解析参数。
