npm 包 split-by-name-webpack2-plugin 使用教程

前言

作为现代前端开发中不可或缺的一环，Webpack 在项目中的作用不可小觑。然而，当项目规模不断扩大的时候，Webpack 的构建速度也会变得比较缓慢，这就需要我们进一步进行优化。其中，避免将无需打包的文件打入资源包是提高项目构建速度的一个重要方面。而 split-by-name-webpack2-plugin 正是一个非常实用的插件，可以根据文件名将资源划分为不同的构建文件。

split-by-name-webpack2-plugin 的使用方法

1. 首先，我们需要安装 split-by-name-webpack2-plugin，执行如下命令：

npm install --save-dev split-by-name-webpack2-plugin

1. 接下来，在 Webpack 的配置文件中引入插件：

const SplitByNameWebpackPlugin = require('split-by-name-webpack2-plugin');

1. 调用插件的构造函数创建实例，并在 plugins 配置中进行添加：

plugins: [
  new SplitByNameWebpackPlugin({
    chunks: 'all',
    names: name => name.split('/')[0],
  }),
  // 其他插件
]

该示例代码中，chunks 属性指出会被拆分成不同构建文件的 chunk，names 属性指出分割时的划分标准。

在这里，chunks 属性中的 all 表示将所有形式的 chunk 进行划分，实现最佳的构建速度和资源利用率。names 属性使用一个回调函数，该函数传入文件名，函数将文件名拆分成数组，并将第一个元素返回。上述语句将会将以 / 分隔的文件名的第一个部分用于构建文件的划分。

split-by-name-webpack2-plugin 的示例代码

下面我们演示一段代码，展示 split-by-name-webpack2-plugin 的实际使用效果。先创建一个 index.js 文件，内容如下：

import a from './a';
import b from './b';
import c from './c';
console.log(a + b + c);

然后，创建三个模块 a.js、b.js、c.js，分别包含如下内容：

a.js：

export default 2;

b.js：

export default 3;

c.js：

export default 7;

接下来，在 Webpack 配置文件中添加以下配置：

-- -------------------- ---- -------
----- ------- - -------------------
----- ------------------------ - -----------------------------------------

-------------- - --- -- --
  ------ -------------
  ------- -
    --------- ------------
    ----- --------- - --------
  --
  -------- -
    --- --------------------------
      ------- ------
      ------ ---- -- -------------------
    ---
    --- -------------------------------------
      ----- ---------
      ------- --------- ---------
      ---------- --
    ---
  --
---

其中，SplitByNameWebpackPlugin 用于拆分文件，webpack.optimize.CommonsChunkPlugin 用于提取公共代码。最终构建后得到的目录结构如下：

dist
|--a.js
|--b.js
|--c.js
|--index.js

得到的 a.js、b.js、c.js 文件均为独立的构建文件，不会将其他文件打包进去，最大化了构建速度的提升。

结语

split-by-name-webpack2-plugin 是一个非常实用的 Webpack 插件，可以大大提高构建速度和资源利用率，避免无效的资源打包，同时也能够使代码逻辑更加清晰。通过学习该插件，我们可以更好地理解 Webpack 的构建原理和优化手段，为更好的项目开发提供帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a48ccae46eb111f0f7