如何将网页下载到Git仓库并分离HTML、CSS、JS独立文件

别折腾拆分Chrome「网页另存为」生成的单文件，那种MHTML封装格式拆起来费时间，优先用下面的方法直接拿到分离的HTML/CSS/JS资源，直接适配Git仓库结构：

优先方案：直接抓取分离式原始资源 #

• 单页面资源少的情况：打开Chrome DevTools切到Sources面板，刷新目标页，所有加载的资源会按原路径列在对应域名的目录树里，右键需要的HTML、CSS、JS文件选Save保存到本地，手动按目录归类即可。
• 单页面资源多的情况：切到DevTools的Network面板，筛选类型分别选Document、Stylesheet、Script，刷新页面等所有资源加载完成后，右键任意请求选择「Save all as HAR with content」导出全量资源包，用本地脚本批量解析HAR，按资源类型导出到对应目录即可，不用手动逐个点保存。
• 需要抓多页面整站的情况：直接用wget命令行工具拉取，执行后自动生成资源分离的目录结构，命令如下：

wget --page-requisites --convert-links --adjust-extension --no-parent 目标页面URL

命令参数会自动拉取页面依赖的所有CSS/JS/图片资源，把链接转换为本地相对路径，不用手动改引用。

兜底方案：已保存单MHTML文件的拆分方法 #

如果你已经存了Chrome生成的.mhtml单文件，不用找第三方工具，写个简单的本地Node脚本就能拆分：

const fs = require('fs');
const mhtmlContent = fs.readFileSync('./你的保存文件.mhtml', 'utf8');
// 按MHTML内置的分隔符切分资源块
const resourceBlocks = mhtmlContent.split(/------MultipartBoundary--/);
resourceBlocks.forEach(block => {
  // 匹配HTML块写入根目录
  if (block.includes('Content-Type: text/html')) {
    const htmlCode = block.split('\r\n\r\n').slice(1).join('\r\n\r\n');
    fs.writeFileSync('./index.html', htmlCode);
  }
  // 匹配CSS块写入css目录
  if (block.includes('Content-Type: text/css')) {
    const cssCode = block.split('\r\n\r\n').slice(1).join('\r\n\r\n');
    const fileName = block.match(/Content-Location: .*\/([^/?]+\.css)/)?.[1] || `style-${Date.now()}.css`;
    fs.writeFileSync(`./css/${fileName}`, cssCode);
  }
  // 匹配JS块写入js目录
  if (block.includes('Content-Type: application/javascript')) {
    const jsCode = block.split('\r\n\r\n').slice(1).join('\r\n\r\n');
    const fileName = block.match(/Content-Location: .*\/([^/?]+\.js)/)?.[1] || `script-${Date.now()}.js`;
    fs.writeFileSync(`./js/${fileName}`, jsCode);
  }
});

拆分完成后把HTML里的资源引用路径替换成本地分离文件的相对路径，本地打开验证没有404报错即可。

Git仓库提交前整理 #

• 根目录存放入口HTML文件，新建css/、js/、assets/三个子目录，分别对应样式文件、脚本文件、图片字体等静态资源
• 清理掉页面里内嵌的第三方统计、埋点、反调试脚本，避免后续二次开发时被干扰
• 新增.gitignore文件，忽略本地临时文件、系统缓存文件、日志文件，直接提交到Git仓库即可。

提示：抓取公开站点内容做二次开发请遵守目标站点的版权声明与访问规则，不要用于未授权的商业场景。

内容的提问来源于stack exchange，提问作者b3ar1sh