5.1.1 extract-text-webpack-plugin-Webpack实战：入门、进阶与调优(中)

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

### 5.1.1 extract-text-webpack-plugin：CSS 分离的艺术

在Web开发的浩瀚星空中，Webpack犹如一颗璀璨的星辰，以其强大的模块打包能力，引领着前端工程化的潮流。随着Web应用日益复杂，对资源加载效率的要求也越来越高，其中CSS的处理与优化成为不可忽视的一环。`extract-text-webpack-plugin`（以下简称ETWP）正是Webpack生态中用于将CSS从JavaScript bundle中分离出来的一个关键插件，它在提升页面加载性能、优化缓存策略方面扮演着重要角色。然而，值得注意的是，从Webpack 4开始，官方推荐使用`mini-css-extract-plugin`作为`extract-text-webpack-plugin`的替代品，但了解ETWP的工作原理与用法，对于理解Webpack的CSS处理机制以及迁移至新插件仍具有重要意义。

#### 5.1.1.1 引言：为何需要CSS分离

在Web应用的早期，CSS和JavaScript通常被打包在同一个文件中，这样做虽然简化了配置，但在实际部署时却带来了性能问题。CSS的加载会阻塞页面的渲染，即使CSS与页面内容无关，用户也必须等待CSS下载完成才能看到任何内容。此外，CSS文件往往变动频率低于JavaScript，将其单独打包有助于实现更精细的缓存策略，减少不必要的资源重新加载。

#### 5.1.1.2 extract-text-webpack-plugin简介

`extract-text-webpack-plugin`是Webpack的一个插件，它允许你将CSS从主应用程序bundle中分离出来，进入到一个或多个单独的CSS文件中。这样做不仅减少了主bundle的大小，还允许CSS文件并行加载，从而提高了页面渲染速度。ETWP通过创建一个新的“chunk”来存放CSS，并自动生成相应的`<link>`标签将CSS文件引入HTML中。

#### 5.1.1.3 安装与配置

##### 安装

首先，你需要通过npm或yarn来安装`extract-text-webpack-plugin`。但请注意，由于Webpack 4及更高版本推荐使用`mini-css-extract-plugin`，这里我们仅作为学习目的展示ETWP的安装方式：

```bash
npm install extract-text-webpack-plugin --save-dev
# 或者
yarn add extract-text-webpack-plugin --dev
```

##### 配置

在Webpack配置文件中，你需要引入ETWP，并在`module.rules`中配置相应的loader以使用它。以下是一个基本的配置示例：

```javascript
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // 当不支持CSS模块化时，回退到style-loader
          use: ['css-loader', 'postcss-loader'] // 使用的loader，按从右到左的顺序执行
        })
      }
      // 其他loader配置...
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css', // 输出文件名，支持hash等占位符
      allChunks: true // 是否为所有额外的chunk提取CSS
    })
  ]
  // ...
};
```

#### 5.1.1.4 工作原理

ETWP的核心在于其能够拦截Webpack的模块处理流程，将CSS模块从正常的JavaScript处理流程中抽离出来，并生成一个新的chunk。这个过程大致分为以下几个步骤：

1. **识别CSS模块**：Webpack通过配置的loader识别出CSS文件。
2. **拦截并抽离**：ETWP拦截这些CSS模块，阻止它们被打包进主bundle，而是将它们单独处理成一个或多个CSS文件。
3. **生成CSS文件**：根据配置，ETWP生成具有指定名称和hash的CSS文件。
4. **注入HTML**：通过Webpack的HTML插件（如`html-webpack-plugin`），将生成的CSS文件以`<link>`标签的形式自动注入到HTML模板中。

#### 5.1.1.5 实战应用

在实际项目中，ETWP（或其替代品）的应用非常广泛。以下是一些常见的应用场景和最佳实践：

- **多入口点项目**：对于具有多个入口点的项目，ETWP能够确保每个入口点对应的CSS都被正确分离。
- **CSS模块化**：结合`css-loader`的模块化功能，ETWP能够支持CSS的模块化，实现样式的作用域隔离。
- **预处理器支持**：ETWP与`sass-loader`、`less-loader`等预处理器loader配合，能够处理Sass、Less等格式的CSS文件。
- **优化加载性能**：通过将CSS文件分离，并利用浏览器的并行加载能力，提高页面加载速度。
- **缓存优化**：CSS文件的独立打包使得它们更容易被缓存，通过合理的缓存策略，可以减少用户再次访问时的资源加载时间。

#### 5.1.1.6 注意事项与替代方案

- **Webpack 4及更高版本**：如前所述，从Webpack 4开始，官方推荐使用`mini-css-extract-plugin`作为ETWP的替代品。它提供了更好的性能和更简单的配置方式。
- **兼容性**：ETWP可能不再支持Webpack的最新特性或修复已知的bug。在决定使用ETWP时，请考虑项目的Webpack版本和未来的可维护性。
- **性能考虑**：虽然ETWP能够有效提升页面加载性能，但在某些情况下（如开发环境），频繁地重新编译CSS文件可能会成为性能瓶颈。

#### 5.1.1.7 总结

`extract-text-webpack-plugin`作为Webpack生态中处理CSS分离的重要插件，其诞生与发展见证了前端工程化进程中的一次重要飞跃。尽管随着Webpack版本的更新，它逐渐被新的解决方案所取代，但了解其工作原理与配置方法，对于深入理解Webpack的CSS处理机制以及迁移至新插件仍具有不可估量的价值。在未来的项目中，我们可以根据项目的具体需求和Webpack的版本选择合适的CSS处理方案，以实现更优的性能和更好的用户体验。

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

全解webpack前端开发环境定制

Webpack零基础入门

webpack指南

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

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