面我推荐几款工具

HTML App Build

HTML App Build 工具是一款可以将 HTML 网页转换为 EXE 可执行文件的软件。它可以让您使用 HTML、JavaScript 和 CSS 等网页技术开发跨平台的移动应用

使用 HTML App Build 工具的步骤如下：

1. 在您的电脑上安装 HTML App Build 工具

2. 打开 HTML App Build 工具，选择“文件”-> “新建”->“项目”，输入项目名称和保存路径，选择“5+ App”模板。

3. 编写您的 HTML、JavaScript 和 CSS 代码，或者使用 HBuilderX 内置的 HTML5+ API 和 MUI 框架来快速开发移动应用。

4. 在 HTML App Build 工具中选择“运行”-> “运行到手机或模拟器”，查看您的应用在真机或模拟器上的效果。

5. 在 HTML App Build 工具中选择“云打包”-> “打包设置”，设置应用的图标、名称、版本号等信息，然后选择“开始云打包”。

6. 等待云打包完成后，下载应用的 EXE 文件，或者扫描二维码在手机上安装应用。

HEX

HEX 工具是一款可以将 HTML 网页转换为 EXE 或 APP 的软件。它可以让您使用 HTML等网页技术开发桌面或移动应用。

使用 HEX 工具将 HTML 变为 EXE 或 APP 的步骤如下：

1. 在您的电脑上安装 HEX 工具。

2.打开HEX 工具，选择“新建项目”，输入项目名称和保存路径，选择“HTML”模式。

3.编写您的 HTML ，JavaScript 和 CSS 代码，或者使用现有的 HTML 网页文件。

4.在HEX 工具中选择“发布项目”，设置您的应用的图标、名称、版本号等信息，然后选择“生成 EXE”或“生成 APP”。

5.等待生成完成后，您就可以得到您的应用的 EXE 或 APP 文件，可以在电脑或手机上运行。

这是详细的使用过程：HTML杞� EXE锛寃eb椤圭洰鎵撳寘 exe鐨勮В鍐虫柟妗堬紙1锛夛細HEX - 鐭ヤ箮

HTML Compiler

HTML Compiler是一款可以将HTML文件转换为可执行文件的工具。您可以使用它来制作独立的网页应用程序或演示文稿。要使用HTML Compiler工具，您需要按照以下步骤操作：

1. 下载并安装HTML Compiler2021直装版，或者从官网下载最新版本。

2. 打开HTML Compiler，选择“新建项目”或“打开项目”，并选择您要编译的HTML文件或文件夹。

3. 在项目设置中，您可以修改应用程序的名称、图标、版本、版权等信息，以及选择编译选项和输出路径。

4. 点击“编译”按钮，等待编译完成，您就可以在输出路径中找到生成的可执行文件了。

这是关于html compiler直装版的详细教程HTML Compiler2021直装版 附安装教程及特点 - 哔哩哔哩

如果您只是想编辑和运行HTML文件，而不需要编译成可执行文件，您可以使用其他的HTML编辑器，例如VS Code、HBuilderX、Online HTML Editor等。这些编辑器都提供了语法高亮、代码提示、实时预览等功能，可以帮助您快速编写和测试HTML代码。

ineicons 是一套收录超过 5000 种图标的合集，主要设计风格为手工制作线条图标，适合使用于各种现代化用户界面，例如网页、桌面软件等等，对于设计师或开发项目来说非常有用。

Lineicons 分为两种方案：Free Basic 和 Pro，前者免费，但可使用的图标图案 532 个，而且没有提供 AI 源文件，使用时需要标示出处来源；若付费升级 Pro 方案就可开启完整五千多个图标集，使用无需标示出处，也会有向量图原始档可进行细部的编辑修改，付费方案依照授权用户数量而有不同定价，起始价格为 美元（一年），定价上并不算太高。

大家下载免费素材即可。

Lineicons

网站链接：https://lineicons.com/

使用教学

开启 Lineicons 网站后点选「Download Now」会看到两种方案比较表，分别是免费基本方案和付费 Pro 方案，可使用的图标素材数量不同，免费使用需要标示出处来源，如果只用得到 Lineicons 里其中几个免费图标的话，只要选择免费版即可。

点选「Download Free」免费下载 Lineicons 图标集，目前共有超过 500 个基本图案。

从网站上方选单选择「Icons」开启图标浏览工具，从这里可以探索各种分类的图标图案，或从上方搜寻字段输入关键词查找，调整预览图标大小、颜色，左侧则是 Lineicons 分类可找到特定类型的图标素材。

在 Lineicons 网页如果右上角标示为 PRO 代表需要付费升级才能使用。

如果用户只想寻找免费的基本图标素材，可以在浏览工具右上角切换「FREE」，如此一来图标查看器就只会显示免费版图标图案，减少大部分干扰。

点选要取用的图标图案后就会显示程序代码，稍后将 Lineicons 的 CDN 链接加入网站，就能在特定位置加载图片，非常简单，透过 CSS 来调整图标颜色、大小或显示样式，从 Lineicons 网站也能单独复制特定图标 SVG 程序代码或下载为 SVG 向量图格式。

从 Lineicons 首页找到 CDN 链接，将它加入网站的 head 就能快速加载特定图标图案，和其他常见的免费图标库差不多，好处是无需自行托管任何图标图案或字型。更多的使用说明和范例可参考说明文件。

值得一试的三个理由：

1. Lineicons 收录超过 5000 个图标图案，风格为线条图标
2. 免费方案可使用 532 个图标，使用时需要标示出处来源
3. 可透过免费 CDN 加载相关档案，以程序代码显示图案

言:

其他资源可以有两种解读:

1. 其他资源指除了html,"css","js"等资源
2. 也可以是通过exclude排除已经配置完的资源,其他一些没有配置的资源

1. webpack打包其他资源流程

1.1 webpack打包其他资源说明

1. 打包除了html,css,js外的其他资源
2. 利用exclude来排除已经配置处理文件
3. 处理所有不是exclude排除的文件
4. 利用file-loader来处理其他资源文件

这里以图标为例:

1.2 下载字体图标

阿里图标官网: https://www.iconfont.cn/

在阿里图标官网下载你想要的字体图标

1.3 使用字体图标

<span class="iconfont icon-weixin"></span>
<span class="iconfont icon-ziyuan"></span>
<span class="iconfont icon-wodejianying"></span>
<span class="iconfont icon-shouyejianying"></span>
<span class="iconfont icon-sirendingzhi"></span>

1.4 字体图标的打包配置

说明:

1. 在webpack.config.js中配置css文件的打包
2. 在webpack.config.js中配置字体图标的打包

代码如下: