简介
fis3-postpackager-cloader 是一个用于 FIS3 打包阶段的插件，它可以将多个 js 或 css 文件合并成一个 js 或 css 文件，并且自动生成对应的 html 文件来加载这个合并后的文件。它还可以自动地为 js 或 css 文件添加版本号并插入到 HTML 中，从而让缓存失效。在前端开发中，这个插件非常实用。
安装
在安装之前，需要首先安装 FIS3。完成之后，在终端中执行以下命令即可安装 fis3-postpackager-cloader：
npm install -g fis3-postpackager-cloader
安装完成之后，需要在 FIS3 配置文件中启用这个插件。假设 FIS3 配置文件为 fis-conf.js，那么需要在这个文件中添加以下代码：
fis.match('::package', {
postpackager: [fis.plugin('cloader')]
});使用
假设现在有两个 js 文件 a.js 和 b.js 需要合并成一个文件。那么可以在 HTML 文件中引入 a.js 和 b.js，然后在终端中执行以下命令：
fis3 release -d path/to/release
执行完成之后，会在 path/to/release 目录下生成一个合并后的 js 文件，以及一个自动根据这个合并后的 js 文件生成的 html 文件。
如果需要自定义合并规则，可以在 FIS3 配置文件中进行配置。例如，以下代码表示以 a.js 为入口，自动合并 a.js 和它依赖的所有 js 文件：
fis.match('a.js', {
packTo: 'main.js'
});这个插件还支持添加版本号，以让缓存失效。可以在 FIS3 配置文件中使用 hash 参数来启用这个功能。例如，以下代码表示为所有打包生成的文件添加版本号：
fis.match('*', {
useHash: true
});如果需要自定义版本号的长度和字符集，可以在 FIS3 配置文件中进行配置。例如，以下代码表示使用 8 个字符的版本号并使用数字和小写字母作为字符集：
fis.match('*', {
useHash: true,
hashLength: 8,
hashType: 'short'
});示例代码
以下代码展示了如何使用 fis3-postpackager-cloader 进行打包合并和添加版本号：
-- -------------------- ---- ------- -- ----------- ---------------------- - ------------- ----------------------- --- ----------------- - ------- --------- --- -------------- - -------- ----- ----------- -- --------- ------- ---
-- -------------------- ---- ------- -- ---------- --------- ----- ------ ------ ----- ---------------- ---------------------- ------- ---------------------- -------------------- ------- ---------------------- -------------------- ------- ------ ------- -------
执行以下命令：
fis3 release -d path/to/release
生成的文件如下：
path/to/release/main_7aa9875a.js path/to/release/index.html
其中，main_7aa9875a.js 是自动生成的合并后的 js 文件，它包含了 a.js 和 b.js 的代码。index.html 是自动生成的 HTML 文件，它自动引用了合并后的 js 文件，并且在文件名中添加了版本号 7aa9875a。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608c81e8991b448debfe