整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
面我推荐几款工具
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 工具是一款可以将 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文件转换为可执行文件的工具。您可以使用它来制作独立的网页应用程序或演示文稿。要使用HTML Compiler工具，您需要按照以下步骤操作：
1. 下载并安装HTML Compiler2021直装版，或者从官网下载最新版本。
2. 打开HTML Compiler，选择“新建项目”或“打开项目”，并选择您要编译的HTML文件或文件夹。
3. 在项目设置中，您可以修改应用程序的名称、图标、版本、版权等信息，以及选择编译选项和输出路径。
4. 点击“编译”按钮，等待编译完成，您就可以在输出路径中找到生成的可执行文件了。
这是关于html compiler直装版的详细教程HTML Compiler2021直装版 附安装教程及特点 - 哔哩哔哩
如果您只是想编辑和运行HTML文件，而不需要编译成可执行文件，您可以使用其他的HTML编辑器，例如VS Code、HBuilderX、Online HTML Editor等。这些编辑器都提供了语法高亮、代码提示、实时预览等功能，可以帮助您快速编写和测试HTML代码。
包html需要用到一个插件html-webapck-plugin。
npm i html-webpack-plugin -D
package.json需要的开发依赖如下：
{
"name": "wpk5-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.3.1",
"webpack": "^5.28.0",
"webpack-cli": "^4.5.0"
}
}webpack.config.js的配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
template: './src/assets/index.html',
hash: true,
filename: 'index.html',
favicon: './src/assets/favicon.ico'
})
],
mode: 'development'
}代码仓库：https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.1/
多数情况，我们使用webpack打包单页面应用，有的时候也会遇到多页面的项目
单入口配置
一般情况下的配置模板如下：
module.exports = {
entry: {},
output: {},
module: {},
plugins: [],
devServer: {}
}
entry
我们的入口文件一般都是JS文件
entry： {
entry: './src/entery.js'
}
output
output用来告诉webpack最后打包文件的地址和文件名称
output: {
//打包后的文件路径
path: path.resolve(__dirname, 'dist'),
//打包后的文件名称
filename: 'bundle.js'
}
当然还要引入path模块，这个是nodejs自带的模块；在webpack.config.js文件的头部引入；
const path = require('path');
打包HTML文件
需要使用html-webpack-plugin插件，它会将我们的html模板文件打包，自动生成一个引用了所有webpack打包的文件的新的html文件：
安装：
npm install html-webpack-plugin --save-dev
在配置文件的plugins内加载
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
};
这将会产生一个包含以下内容的文件dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
这样一个最基本的单页面的配置文件如下：
const path = require('path');
module.exports = {
//入口文件的配置项
entry: {
entry: './src/entry.js'
},
//出口文件的配置项
output: {
//输出的路径，用了Node语法
path: path.resolve(__dirname, 'dist'),
//输出的文件名称
filename: 'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module: {},
//插件，用于生产模版和各项功能
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
//配置webpack开发服务功能
devServer: {}
}
多入口配置
多入口配置的时候只需要在entry中多增加一个入口文件
输出文件的时候将filename的值修改为[name].js，作用是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个出口文件
同时将定义多个HtmlWebpackPlugin插件，有几个页面就配置几项
module.exports = {
entry: {
client1: './src/client1/client1.js',
client2: './src/client2/client2.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'client1',
filename: 'client1.html',
template: 'src/client1/client1.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new HtmlWebpackPlugin({
title: 'client2',
filename: 'client2.html',
template: 'src/client2/client2.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
],
};
#真相来了#
*请认真填写需求信息，我们会在24小时内与您取得联系。
