第4章预处理器-Webpack实战：入门、进阶与调优(上)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(上)

### 第4章 预处理器

在前端工程化的大潮中，Webpack作为模块打包器的佼佼者，不仅能够处理JavaScript，还能通过加载器（loaders）机制无缝集成各种预处理器，为开发者提供从CSS到图片、字体、模板等多种资源的预处理能力。预处理器通常用于增强原生语言的功能，使之更加适合大型项目的开发需求，提升开发效率和代码质量。本章将深入探讨Webpack中预处理器的应用，包括CSS预处理器、模板预处理器以及文件处理预处理器等。

#### 4.1 CSS预处理器

CSS预处理器是CSS的一种扩展语言，它允许你使用变量、嵌套规则、混合（mixins）、函数等编程特性来编写CSS，使CSS代码更加模块化、可维护和复用。目前市面上流行的CSS预处理器主要有Sass（SCSS）、Less和Stylus。

##### 4.1.1 Sass/SCSS

Sass（Syntactically Awesome Stylesheets）是最早也是最流行的CSS预处理器之一，其后推出的SCSS（Sassy CSS）是其语法上的改进版，完全兼容CSS语法，学习成本更低。Sass/SCSS通过变量、嵌套、混合等特性，极大提高了CSS的编写效率和可维护性。

**在Webpack中配置Sass/SCSS**：

1. **安装依赖**：首先，你需要安装`node-sass`（或`sass`，`node-sass`已逐渐被`sass`官方库取代）、`sass-loader`以及`css-loader`和`style-loader`（用于将CSS注入到DOM中）。

```bash
   npm install --save-dev sass sass-loader css-loader style-loader
   ```

2. **配置Webpack**：在`webpack.config.js`文件中，你需要添加相应的`module.rules`来处理`.scss`或`.sass`文件。

```javascript
   module: {
     rules: [
       {
         test: /\.s[ac]ss$/i,
         use: [
           'style-loader', // 将 JS 字符串生成为 style 节点
           'css-loader',   // 将 CSS 转化成 CommonJS 模块
           'sass-loader',  // 将 Sass 编译成 CSS
         ],
       },
     ],
   }
   ```

3. **使用Sass/SCSS**：在你的项目中，你现在可以自由地编写Sass/SCSS代码了。例如，定义一个变量并在多处使用它：

```scss
   // _variables.scss
   $primary-color: #3498db;

// main.scss
   @import 'variables';
   body {
     color: $primary-color;
   }
   ```

##### 4.1.2 Less

Less与Sass类似，但拥有自己的一套语法体系。Less通过`.less`文件扩展名来标识，它同样支持变量、嵌套、混合等功能，且学习曲线较为平缓。

**在Webpack中配置Less**：

1. **安装依赖**：安装`less`、`less-loader`以及`css-loader`和`style-loader`。

```bash
   npm install --save-dev less less-loader css-loader style-loader
   ```

2. **配置Webpack**：与Sass/SCSS类似，但使用的是`less-loader`。

```javascript
   module: {
     rules: [
       {
         test: /\.less$/,
         use: [
           'style-loader',
           'css-loader',
           'less-loader',
         ],
       },
     ],
   }
   ```

##### 4.1.3 Stylus

Stylus是一个高效、富有表达力的CSS预处理器，它允许你使用简洁的语法来编写CSS，并且支持许多高级特性如条件语句、循环等。

**在Webpack中配置Stylus**：

1. **安装依赖**：安装`stylus`、`stylus-loader`以及`css-loader`和`style-loader`。

```bash
   npm install --save-dev stylus stylus-loader css-loader style-loader
   ```

2. **配置Webpack**：使用`stylus-loader`来处理`.styl`或`.stylus`文件。

```javascript
   module: {
     rules: [
       {
         test: /\.styl(us)?$/,
         use: [
           'style-loader',
           'css-loader',
           'stylus-loader',
         ],
       },
     ],
   }
   ```

#### 4.2 模板预处理器

模板预处理器主要用于HTML模板的处理，它们通过添加逻辑、循环、条件语句等能力，使HTML模板更加灵活和强大。在Webpack中，常用的模板预处理器有Pug（原Jade）、Handlebars、EJS等。

##### 4.2.1 Pug

Pug是一个高性能的模板引擎，它使用简洁的语法来编写HTML模板，并支持变量、条件语句、循环等特性。

**在Webpack中配置Pug**：

1. **安装依赖**：安装`pug`、`pug-loader`或更常用的`html-loader`（虽然`html-loader`不是专门为Pug设计的，但可以通过插件支持Pug）。

```bash
   npm install --save-dev pug html-loader
   ```

注意：`pug-loader`现已不维护，推荐使用`html-loader`结合Pug插件或其他方式。

2. **配置Webpack**：使用`html-loader`时，可能需要额外的插件来支持Pug，如`pug-html-loader`。

```javascript
   module: {
     rules: [
       {
         test: /\.pug$/,
         loader: 'pug-html-loader', // 假设有这样的loader，实际可能需要自定义配置
       },
     ],
   }
   ```

或者，你可以使用Webpack的插件系统，在构建流程中转换Pug文件。

##### 4.2.2 Handlebars

Handlebars是一个简单而强大的模板引擎，它允许你将数据绑定到HTML模板上，并通过简单的条件语句和循环来控制模板的输出。

**在Webpack中集成Handlebars**：

由于Webpack主要处理模块打包，直接处理Handlebars模板可能需要借助额外的工具，如通过自定义loader或插件，或者将Handlebars模板预处理成JavaScript模块后再引入Webpack构建流程。

#### 4.3 文件处理预处理器

除了CSS和模板外，Webpack还支持对图片、字体、视频等文件进行预处理。这些预处理通常涉及文件的压缩、优化、转换格式等操作，以提高加载速度和改善用户体验。

##### 4.3.1 图片处理

Webpack通过`file-loader`、`url-loader`和`image-webpack-loader`等加载器来处理图片文件。`file-loader`会将图片文件移动到输出目录，并返回（相对）URL；`url-loader`类似于`file-loader`，但能在文件小于限制时返回DataURL；`image-webpack-loader`则用于对图片进行压缩和优化。

**配置示例**：

```javascript
module: {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource', // Webpack 5推荐使用
      // 或者在Webpack 4及以下版本中使用
      // use: [
      //   'file-loader',
      //   {
      //     loader: 'image-webpack-loader',
      //     options: {
      //       mozjpeg: { progressive: true, quality: 65 },
      //       optipng: { enabled: false, },
      //       pngquant: { quality: [0.65, 0.90], speed: 4},
      //       gifsicle: { interlaced: false, },
      //       webp: { quality: 75 }
      //     }
      //   }
      // ],
    },
  ],
}
```

注意：上述配置中的`type: 'asset/resource'`是Webpack 5中引入的Asset Modules，用于替代`file-loader`和`url-loader`。

#### 总结

预处理器是Webpack生态中不可或缺的一部分，它们通过增强原生语言的能力，极大地提升了前端开发的效率和项目的可维护性。在CSS预处理器方面，Sass/SCSS、Less和Stylus各有千秋，选择哪个取决于个人喜好和项目需求。模板预处理器则让HTML模板的编写更加灵活和强大。文件处理预处理器则专注于优化非代码资源，提升应用性能。掌握这些预处理器的配置和使用，将有助于你更好地利用Webpack构建高效、可维护的前端项目。

该分类下的相关小册推荐：

全解webpack前端开发环境定制

Webpack零基础入门

webpack指南

Webpack实战：入门、进阶与调优(下)

Webpack实战：入门、进阶与调优(中)