随着前端开发的发展，我们对于构建工具和自动化构建的需求也越来越高。而其中，Webpack 作为前端界的构建工具之一，也在各种场景中被广泛使用。
在实际的开发中，我们可能需要将打包后的文件按照路由分别保存，或者按照路由拆分 chunk。这时候，我们可以使用 split-by-path-webpack-plugin 这个 npm 包来实现此功能。
安装
我们可以通过 npm 来安装此包。
npm install split-by-path-webpack-plugin --save-dev
使用方法
安装完包后，我们需要在 webpack.config.js 文件中进行配置。下面的示例中，我们将配置单个路由打包为单独的文件。如果需要多个路由按照一定规则进行拆分，则需要进行适当修改。
首先在文件头部引入此包：
const SplitByPathWebpackPlugin = require('split-by-path-webpack-plugin');然后，在 plugins 中配置：
plugins: [
new SplitByPathWebpackPlugin([
{
name: 'about',
path: '/about'
}
])
]以上配置的作用是将路由为 /about 打包为 about.js 文件。
下面是完整的配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------ - ----------------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- --------------------------
-
----- --------
----- --------
-
--
-
--可配置项
此包支持的可配置项如下：
- name：生成的文件名
- path：匹配的路由路径
- chunkName：指定拆分的 chunk 的名称
总结
通过使用 split-by-path-webpack-plugin 这个 npm 包，我们可以很方便地将打包后的文件按照路由进行分类保存，或者按照路由拆分 chunk。此包使用简单，配置项也非常清晰易懂，是我们在前端开发中的一大利器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a48ccae46eb111f0f6