前言
在前端开发中，我们通常需要引入许多的 CSS 样式文件来支持我们的项目。随着项目的增多，CSS 文件的数量也会不断上升，这就给前端资源的加载和性能带来了很大的挑战。
而通过使用 Webpack 打包工具，我们可以使用提取 CSS 样式并进行压缩等优化操作，以此来优化网络传输和性能。但在实际项目中，会存在多个不同页面需要使用的样式，此时我们希望把 CSS 样式按照页面进行分割，并打包成多个文件以达到更好的优化效果。
正好，我们可以使用 npm 包 css-magic-split-webpack-plugin 来解决这一问题，本文将详细介绍如何使用该插件进行 CSS 文件的分割。
css-magic-split-webpack-plugin 简介
css-magic-split-webpack-plugin 是一款专门针对 Webpack 打包时 CSS 文件进行分割的插件。它可以根据自定义规则将 CSS 文件按照不同的规则进行分割，例如按照页面、按照组件等分割。
安装
要使用 css-magic-split-webpack-plugin，我们需要创建一个新的 Webpack 项目或者在现有项目中安装该插件。步骤如下：
- 创建一个新的 Webpack 项目或者打开现有的 Webpack 项目；
- 运行以下命令安装插件：
npm install --save-dev css-magic-split-webpack-plugin
使用方法
下面我们将介绍如何使用 css-magic-split-webpack-plugin 进行 CSS 文件的分割。
1. 添加插件到 Webpack 配置文件
在 Webpack 配置文件中，我们需要引入 css-magic-split-webpack-plugin，并在 plugins 中添加该插件的实例：
const CssMagicSplitWebpackPlugin = require('css-magic-split-webpack-plugin');
module.exports = {
// ...
plugins: [
new CssMagicSplitWebpackPlugin(options),
],
};其中 options 为插件的配置项，该对象中有以下几个属性：
splitBy: CSS 文件的分割规则，可以是一个回调函数或字符串。如果是回调函数，它将接收一个元素，返回该元素需要分割成哪一部分的字符串以决定其分割到哪一个文件中；如果是字符串，将常规寻找键名和值域，并使用该字符串将 CSS 分割为文件。filename: 输出的分割后的 CSS 文件名，可以是字符串或回调函数。如果是字符串，则所有分割后的 CSS 文件都将命名为该字符串，如果是回调函数，则将接收分割后的文件对象作为参数，返回该文件应该使用的文件名。startIndex: 分割后的 CSS 文件的起始 ID。默认值为 0。minSize: 分割后的 CSS 文件的最小大小，如果小于该值，则将不会单独打包该文件。默认值为 100000（100kb）。deleteSource: 是否删除源文件中被分割的 CSS 代码。默认为 true。
例如：
-- -------------------- ---- -------
----- -------------------------- - ------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
-------- --------- -- -
-- -------------------------------------------------- -
------ -------
-
-- ---------------------------------------------------- -
------ --------
-
------ ---------
--
--------- ------- -- -
-- ----------- --- ------- -
------ -----------
-
-- ----------- --- -------- -
------ ------------
-
------ -------------
--
----------- --
-------- -------
------------- -----
---
--
--2. 引用 CSS 文件
在应用中，我们可以使用 import 或者 require 引用 CSS 文件。例如：
import './views/home/home.css';
require('./views/about/about.css');这里注意需要添加 ExtractTextPlugin 使 CSS 独立。
3. 运行 Webpack 打包
配置文件已经准备就绪，我们就可以运行 Webpack 打包了。运行以下命令即可打包：
webpack
总结
本文介绍了如何使用 npm 包 css-magic-split-webpack-plugin 进行 CSS 文件的分割。通过阅读本篇文章，我们已经学会如何在 Webpack 项目中安装和配置该插件，并了解了插件的主要功能和使用方法。
CSS 文件的打包和优化是 Webpack 中非常重要的一个环节，希望大家在日常开发中多加注意，提升网络传输和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562c981e8991b448e00be