Webpack教程系列（四）：Webpack Loader详解:处理CSS、图片等资源

1. 什么是 Loader？

Loader 是 Webpack 的核心功能之一，用于对模块的源代码进行转换。Webpack 默认只能处理 JavaScript 文件，但通过 Loader，我们可以处理其他类型的资源，例如 CSS、图片、字体等。

Loader 的特点：

  • 链式调用：可以串联多个 Loader，按顺序对资源进行处理。
  • 同步/异步：Loader 可以是同步的，也可以是异步的。
  • 单一职责：每个 Loader 只专注于一种转换任务。

2. 常用 Loader 介绍

以下是前端开发中常用的 Loader：

Loader 名称 作用 示例资源类型
babel-loader 将 ES6+ 代码转换为 ES5 JavaScript
css-loader 解析 CSS 文件 CSS
style-loader 将 CSS 注入到 HTML 中 CSS
file-loader 处理文件（如图片、字体） 图片、字体
url-loader 将小文件转换为 Base64 URL 图片、字体
sass-loader 将 SCSS/SASS 文件转换为 CSS SCSS/SASS
postcss-loader 使用 PostCSS 处理 CSS CSS

3. 使用 Loader 处理 CSS

3.1 安装 Loader

首先，安装处理 CSS 所需的 Loader：

1
npm install css-loader style-loader --save-dev

3.2 配置 Loader

在 webpack.config.js 中配置 Loader：

1
2
3
4
5
6
7
8
9
10
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配 CSS 文件
        use: ['style-loader', 'css-loader'] // 使用 Loader
      }
    ]
  }
};
  • **test**：正则表达式，用于匹配文件类型。
  • **use**：指定使用的 Loader，顺序从右到左（即先执行 css-loader，再执行 style-loader）。

3.3 编写 CSS 文件

在 src 目录下创建一个 CSS 文件：

1
2
3
4
5
/* src/style.css */
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}

在入口文件 index.js 中引入 CSS：

1
2
3
4
// src/index.js
import './style.css';

console.log('Hello, Webpack with CSS!');

3.4 运行 Webpack

运行 npx webpack，Webpack 会将 CSS 打包并注入到 HTML 中。打开浏览器，可以看到页面背景变为浅蓝色。

4. 使用 Loader 处理图片

4.1 安装 Loader

安装处理图片所需的 Loader：

1
npm install file-loader url-loader --save-dev

4.2 配置 Loader

在 webpack.config.js 中配置 Loader：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/, // 匹配图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于 8KB 的文件转换为 Base64 URL
              name: 'images/[name].[hash:8].[ext]' // 输出文件名
            }
          }
        ]
      }
    ]
  }
};
  • **limit**：文件大小阈值，小于该值的文件会转换为 Base64 URL。
  • **name**：输出文件的命名规则。

4.3 使用图片

在 src 目录下放置一张图片（如 logo.png），并在 CSS 或 JavaScript 中引用：

1
2
3
4
/* src/style.css */
body {
  background-image: url('./logo.png');
}

运行 npx webpack，Webpack 会处理图片并将其打包到输出目录。

5. 使用 Loader 处理字体

5.1 安装 Loader

字体文件的处理方式与图片类似，可以使用 file-loader 或 url-loader。

5.2 配置 Loader

在 webpack.config.js 中配置 Loader：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/, // 匹配字体文件
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[hash:8].[ext]' // 输出文件名
            }
          }
        ]
      }
    ]
  }
};

5.3 使用字体

在 CSS 中引用字体文件：

1
2
3
4
5
6
7
8
9
/* src/style.css */
@font-face {
  font-family: 'MyFont';
  src: url('./myfont.woff2') format('woff2');
}

body {
  font-family: 'MyFont', sans-serif;
}

6. 总结

本文详细介绍了 Webpack Loader 的概念和用法，包括如何处理 CSS、图片、字体等资源。通过 Loader，我们可以将 Webpack 的能力扩展到各种类型的文件。

在下一篇文章中，我们将深入探讨 Plugin 的概念和用法，学习如何使用插件扩展 Webpack 的功能。

预告：

  • 下一篇：Webpack Plugin 详解：扩展 Webpack 的功能