前言
在前端应用中，webpack 是一款非常流行的构建工具，它能够将前端项目中所需要的各种资源（JS、CSS、图片等）进行打包、压缩、优化等处理。在 webpack 的配置中，常常需要设置打包后的资源文件分割。这时候，split-webpack-plugin 这个 npm 包就可以派上用场了。
本文将对这个 npm 包进行详细的介绍和使用指导，以便于大家能够更好地掌握和使用这个工具。
split-webpack-plugin 简介
split-webpack-plugin 是一款可以自定义 Webpack 打包的插件，它可以将文件打包成多个 chunk，将公共部分抽离出来，以便于缩短加载时间，优化应用性能。它的使用方法非常灵活，可以根据需要自定义配置，支持多种文件类型（JS、CSS、图片等），可以全局访问打包后的资源，大大提高了应用的效率。
安装 split-webpack-plugin
使用 split-webpack-plugin 需要先在工程中安装它。可以使用 npm 命令进行安装：
npm install split-webpack-plugin --save-dev
使用 split-webpack-plugin
使用 split-webpack-plugin 需要在 webpack 的配置文件中进行设置。我们可以在 plugins 中进行如下设置：
-- -------------------- ---- -------
----- ------------------ - --------------------------------
-------------- - -
-------- -
--- --------------------
--------- ---------------------
------- ---------- ----------
---------- --
-------- ------
---
--
--上述代码中，我们首先引入了 split-webpack-plugin 模块，并在 plugins 中设置了一个实例。其中，SplitWebpackPlugin 接收一个配置对象，包含如下几个配置项：
filename：打包后文件名的格式（可以使用 [name]、[hash] 等占位符）。chunks：需要分割的 chunk 的名称。默认值为空数组，代表全部分割。minChunks：被多少个 chunk 引用后，才会被分割。minSize：文件的最小大小，才会被分割。
现在，我们来逐个解释这些配置项。
filename
filename 配置项定义了输出文件的格式和名称，默认为 [name].js，其中 [name] 代表 chunk 的名称。可以使用其他占位符来代替。
chunks
chunks 配置项定义了需要分割的 chunk 的名称。如果不设置，则默认对所有 chunk 进行分割。如果设置了该项，则只对该项中指定的 chunk 进行分割。
minChunks
在 webpack 的打包结果中，如果一个模块被多个 chunk 依赖，那么这个模块只会被打包一次，也就是说会被抽离出来。minChunks 配置项就是定义了至少被多少个 chunk 引用后才会被抽离出来。
minSize
minSize 配置项定义了文件的最小大小，才会被分割。例如设置为 30000，代表文件大小必须大于 30KB 才能被分割。
实例代码
下面是一个使用 split-webpack-plugin 的示例代码（通过 Webpack 打包两个 JavaScript 文件，共用了一个 lodash 库）：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------------------ - --------------------------------
-------------- - -
----- --------------
------ -
----- ----------------
------- ----------
--
------- -
--------- ---------------------
----- ----------------------- -------
--
-------- -
--- --------------------
--------- ---------------------
------- ---------- ----------
---------- --
-------- -----
--
-
-
-- -------------
------ - ---- ---------
-------------------- ----
-- --------------
------ - ---- ---------
------------------------- ----在运行 webpack 命令后，我们可以在 dist 目录下看到两个打包后的 JS 文件：
vendor.eb4e4b64.js main.93a57111.js
其中，vendor.eb4e4b64.js 包含了所有依赖库和外部引用的文件，main.93a57111.js 包含了所有程序源代码。这样，我们就成功地将 JS 文件分割成了两个部分，可以大大提高页面加载速度。
总结
本文介绍了 split-webpack-plugin 这个 npm 包的基本用法，讲解了其配置项以及实现原理，并给出了一个示例代码。希望本文可以帮助读者更好地理解和使用 split-webpack-plugin，从而优化自己的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db07a