Loader —— 加载各种资源的全方位指南
🎯 引言
通过这篇文章，你将了解什么是 Loader，Loader 在项目中如何帮助我们加载和处理不同类型的资源。你会学会如何合理配置 style-loader 和 css-loader 来加载 CSS，怎样使用 file-loader 或 Webpack 5 的 asset 模块加载图片资源，并掌握如何通过 babel-loader 转译现代 JavaScript 代码，使其兼容更多浏览器环境。学完你就能轻松搭建自己的前端项目构建流程，提升开发效率。
📦 什么是 Loader？Loader 的使用场景与执行顺序
先说说 Loader 是什么。简单来说，Loader 就是 Webpack 里面用来预处理各种文件的转换工具。它可以把非 JavaScript 的文件，比如 CSS、图片、字体，甚至是高级 JavaScript 特性，都转换成浏览器能理解的代码。
Loader 的作用就是把“我们写的代码”变成“浏览器能运行的代码”。这就好比你写的是中文书信，而 Loader 是翻译官，把中文翻译成英文给国际友人看。
使用场景
你可能会用 Loader 来处理：
- 加载 CSS 并把样式插入页面
- 处理图片、字体等静态资源
- 转译新语法或者 JSX 代码
- 处理 TypeScript 文件
执行顺序
Webpack 在遇到指定的文件时，会把它交给配置的 Loader 们处理。多个 Loader 配合时，它的执行顺序是从右到左（从下到上）。
举个例子：
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
这里 css-loader 会先把 CSS 文件转成 JS 模块，再由 style-loader 把样式插入到页面上。顺序不能反了，不然 CSS 代码没法转成 JS。
🎨 使用 style-loader 和 css-loader 加载 CSS
浏览器本身可以直接加载 CSS，但是在单页应用或模块化开发环境下，我们希望 CSS 也能像 JS 一样被模块化管理。Webpack 里的 css-loader 和 style-loader 就帮我们完成了这个工作。
- css-loader 负责把 CSS 文件转成 JS 模块，能解析
@import、url()等语法，把 CSS 内容导入到 JS 里。 - style-loader 则负责把这些样式动态地插入到
<style>标签里，真正让页面生效。
示例配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
npm install style-loader css-loader实际效果
当你在 JS 代码里写：
import './style.css';
Webpack 会先通过 css-loader 解析 CSS，把样式转成 JS 代码，然后通过 style-loader 把样式插入到页面的 <head> 里。
代码示例
import './style.css';
console.log('Hello Loader!');
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
<!-- 页面里加载打包后的 JS，样式自动生效 -->
<script src="bundle.js"></script>
MiniCssExtractPlugin 替代 style-loader。🖼️ 加载图片资源（file-loader / asset）
图片资源是前端项目里不可缺少的部分，Webpack 也提供了多种方式加载它们。
传统方式：file-loader
file-loader 会把图片等资源复制到输出目录，并返回最终的 URL 地址，方便你在代码中引用。
配置示例：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
};
优点是支持所有版本 Webpack，使用灵活。
Webpack 5 新特性：asset 模块
Webpack 5 以后推荐用内置的 asset 模块替代 file-loader 和 url-loader，更轻量、配置更简单。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024, // 8kb 以下会被转成 base64，减少请求
},
},
generator: {
filename: 'images/[name].[hash:8][ext]',
},
},
],
},
};
说明
- 小于 8kb 的图片会内联成 base64，减少请求次数
- 大于 8kb 的会复制到输出目录，返回资源 URL
代码示例
import logo from './logo.png';
const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);
这样就能把图片在页面显示出来了。
🛠️ 使用 babel-loader 转译现代 JavaScript
现代 JavaScript 语法越来越多，比如箭头函数、async/await、模块化语法等，但这些新特性并不是所有浏览器都能直接支持。babel-loader 就是用来帮我们把现代 JS 转成兼容性更好的 ES5 代码。
配置方式
首先你需要安装 Babel 相关依赖：
npm install -D babel-loader @babel/core @babel/preset-env
然后在 webpack.config.js 配置：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
};
还需创建 .babelrc 配置文件：
{
"presets": ["@babel/preset-env"]
}
作用
@babel/preset-env会根据你配置的目标浏览器，把代码转成兼容性最高的版本。- 你可以在
package.json里用browserslist字段指定目标环境。
示例
写一段使用箭头函数的代码：
const add = (a, b) => a + b;
console.log(add(1, 2));
通过 babel-loader 处理后，输出的代码会变成普通的函数，兼容老浏览器。
🧾 小节总结
- Loader 是 Webpack 用来处理文件的转换工具，多个 Loader 通过链式调用完成复杂转换。
style-loader和css-loader配合使用，可以把 CSS 文件模块化并动态插入页面样式。- 图片资源可以用传统的
file-loader，也可以用 Webpack 5 的内置asset模块，后者配置更简洁且支持自动内联。 babel-loader结合 Babel，可以转译现代 JavaScript 代码，保证浏览器兼容性。
❓ 知识问答（Q&A）
Q：Loader 的执行顺序是怎样的？
A：Loader 按配置的顺序是从右到左（或从下到上）执行，先写的 Loader 后执行，最后写的 Loader 先执行。
Q：为什么要用 babel-loader 转码？
A：不同浏览器对 JS 新语法支持不同，babel-loader 能把现代 JS 转成兼容性更好的代码，保证在更多浏览器上正常运行。
🧪 小练习
练习 1
配置一个 Webpack 项目，加载本地 CSS 文件并通过 style-loader 和 css-loader 显示样式。
import './main.css';
console.log('测试 CSS 加载');
body {
color: blue;
}
练习 2
使用 babel-loader 转译支持箭头函数的 JS 代码，并确保能在没有现代 JS 支持的浏览器跑通。
const greet = name => `Hello, ${name}!`;
console.log(greet('Loader'));
🎉 恭喜你已经掌握 Loader、style-loader、css-loader、file-loader、asset 模块和 babel-loader 技能啦！现在你可以自信地配置 Webpack 来处理各种资源，提升项目开发体验和兼容性。