背景
在前端开发中，常常会遇到需要分离 HTML 文件和 CSS/JS 文件的情况，这时候就需要使用打包工具来进行处理。而 FIS3 就是一款优秀的前端构建工具，在使用过程中，fis3-hook-page 可以帮助我们更好地处理 HTML 与其它静态资源的关系。
fis3-hook-page 简介
fis3-hook-page 是 FIS3 中一个用于处理 HTML 文件与其它静态资源关系的插件，它可以处理以下这些问题：
- 引用的资源路径替换
- 合并 CSS/JS 文件
- 一些定制化需求的处理
安装
安装方法如下：
npm install fis3-hook-page --save-dev
使用
在使用 fis3-hook-page 之前，需要在项目中配置 fis-conf.js 文件，在该文件中注册该插件，配置如下所示：
fis.hook('page', {
});其中，fis.hook() 方法用于注册插件，传入参数 page 即为 fis3-hook-page 插件，另一个空对象用于传入插件配置。
下面是该插件的相关配置项：
- useCache（布尔型，可选配置）：用于控制是否启用缓存，默认值为 true。
- release（对象型，必选配置）：用于配置 HTML 文件的发布路径，如：
release: '/static/$0'
$0 代表是匹配到的字符串，即 HTML 文件名。
- pack（对象型，可选配置）：用于配置是否启用文件打包，如：
pack: {
'pkg/a.js': [
'static/js/a.js',
'static/js/b.js'
]
}上述配置表示将 a.js 和 b.js 文件打包成一个名为 pkg/a.js 的文件。
- optimizer（对象型，可选配置）：用于配置 HTML、CSS、JS 文件的压缩、合并等优化操作，如：
optimizer: {
html: 'html-minifier',
js: 'uglify-js',
css: 'clean-css'
}上述配置表示在发布过程中，对 HTML 文件使用 html-minifier 进行压缩，对 JS 文件使用 uglify-js 进行压缩，对 CSS 文件使用 clean-css 进行压缩。
在 fis3-hook-page 插件中，需要在 HTML 文件中添加一些特殊注释来控制资源的引用与合并。
例如，如下代码：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
<!-- 引用样式 -->
<!-- cssCombo('/static/css/a.css', '/static/css/b.css') -->
</head>
<body>
<h1>示例</h1>
<!-- 引用脚本 -->
<!-- jsCombo('/static/js/a.js', '/static/js/b.js') -->
</body>
</html>其中，cssCombo() 和 jsCombo() 函数分别表示合并 CSS 和 JS 文件，用于替换样式和脚本引用。由于该插件会扫描 HTML 文件中的注释并进行处理，所以当注释中文本过多时会影响性能，因此我们可以通过缩写的方式来处理。
可使用以下配置进行缩写：
fis.match('*.{js,css,html}', {
useSameNameRequire: true
});上述配置中，useSameNameRequire 表示开启同名依赖，即当文件中有其他文件的引用时，只需传入文件名而不需要传入详细路径。
结语
本文介绍了 fis3-hook-page 插件的基本使用方法，以及其在前端构建过程中的应用，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c36