A. 如何将前端开发的网页封装成手机app
这里介绍一种将前端网页打包樱宽成手机app的工具—HBuilder，可以快速将前端网页打包为手机app，使用起来非常方便，下面我简单介绍一下实现过程，主要内容如下脊伏亮：
1.下载安装HBuilder，这个直接到官网上下载就行，免费的，目前来说，有Windows和Mac平台的，这里我们选择APP开发版：
2.下载完成后，我们解压这个zip压缩包，解压后的文件如下：
3.接着，我们双击打开HBuilder，依次点击“文件”->“新建”->“项目”，选择“5+APP(A)”，同时勾选“HelloH5+”,输入项目名称，如下：
这里为了方便演示，我新建了一个app.html，主要代码如下，其实就是一个简单的登陆页面，文本框输入内容，然后点击登陆打印出来：
用浏览器打开这个html文件，效果如下：
4.接着，就是打包程序了，双击打开mainfest.json配置文件，点击“云端获取”，获得唯一的“应用标识(AppID)”，同时设置一下“应用入口页面（首页）地址”，即上面的app.html，如下：
5.配置mainfest.json完成后，我们右键APP项目，在弹出的菜单中依次选择“发行”->“原生App-云端打包(P)”，就会弹出打包窗口，这里我打包的是安卓app，故选择Android，如果你打包的是苹果app，选择iOS就行，完成后，直接点击右下角的“打包”按钮就行：
6.云端打包成功后，就会生成app的下载链接，这里我们直接点击下载到本地，如下，只有5次下载机会，到此，app已经打包完成：
7.最后，我们将打包后的安装文件发送到手机上，安装后的效果如下：
至此，我们就完成了将前端网页打包成手机app。总的来说，整个过程不难，就是配置步骤相对复杂一些，只要你按着步骤多操作几遍，熟悉一下相关参数配置，很快就能掌握的，不难，这里你也可以把界面写的更漂亮、美观一些，然后再打包，网上也有相关教程和资料，感兴趣的话，可以搜一下，希望以上分享的内容厅培能对你有所帮助吧
B. php+h5混合编程的web项目怎么打包生成apk
工具有：
cordova (这个前端使用ionic 后台接口使用php 可使用node.js 命令行本地打包)
cocoonJS (在线打包工具，主要针对HTML5游戏吧。用的少，可以试下)
hbuilder（楼上也有提到。将网址配置到工具中 可以自己添加统计和推送代码 然后打包有【android】.apk 【iphone】.ipa）
C. 【Web前端基础】webpack打包原理是什么
【Web前端基础】webpack打包原理是什么？1、概念
本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。
在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
2、分析
1、人口文件
// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
//m2.js
export default {
b:2
}
//m1.js
export const test = {test:1}
export default {
a:1
}
2、生产的文件
(function (moles) {
var installedMoles = {}; //缓存
/*
* 加载模块函数
* 传入模块id
* */
function __webpack_require__(moleId) {
// 检查缓存中是否有模块
if (installedMoles[moleId]) {
return installedMoles[moleId].exports;
}
// 创建一个新模块，并缓存起来
var mole = installedMoles[moleId] = {
i: moleId,
l: false,
exports: {}
};
// 调模块的函数，moles
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
mole.l = true;
// 返回对应模块
return mole.exports;
}
__webpack_require__.m = moles;
__webpack_require__.c = installedMoles;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (mole) {
var getter = mole && mole.__esMole ?
function getDefault() {
return mole['default'];
} :
function getMoleExports() {
return mole;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = "";
// 加载入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (mole, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
观察以上代码得到结果：
1、打包后的代码是一个立即执行函数，且传入的参数为一个数组
2、参数数组就是我们引用的模块
3、每一个模块对应着数组的位置就是那么的id
4、在立即函数中加载入口文件，并执行
__webpack_require__ ： 加载并执行某一个模块并将模块缓存在 installedMoles 中。
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
这里是执行引用的某一个模块。
并将mole，exports，require 加入模块中。
这也是为什么我们在模块中有全局变量 mole/exports/require
通过对打包后的文件分析，基本可以完全理解打包过程。
D. 你最喜欢用哪款前端开发工具为什么
前端开发最爽的地方就在于，一个编辑器，一个浏览器就足矣走天下。
编辑器——VSCode前端开发利器，超级好用的编辑器，对于大前端来说更是不可多得。由微软出品，跨平台支持，颜值高，易上手，丰富的插件支持。下面推荐几个前端常用插件。
调试工具： 前端性能优化工具：
Yellow Lab Tools ：一款Web性能及前端质量测试工具。与其他工具不同的是，它有一些在其他工具上无法看到的独特功能，例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。
DOM monster ：你只需要添加到你的浏览器书签中,在任何需要调试的页面点击这个书签,它就能够帮助你列出目前页面出现的性能问题。
前端开发是目前一个非常火的行业，就业前景和薪资水平都非常不错，至于开发工具的话，那就非常多了，大部分代码编辑器、IDE环境都支持，下面我简单介绍4个非常不错的前端开发工具，感兴趣的朋友可以尝试一下：
01 代码编辑器这是目前前端开发一个非常流行的开发工具，在业界非常受欢迎，免费、开源、跨平台，由微软自主研发，可以说是良心产品，常见的智能补全、代码高亮、语法提示等功能这个软件都能很好支持，除此之外，插件扩展非常丰富，可以很好的进行代码编辑和调试，轻巧灵活，运行速度快，对于前端开发来说，是一个非常不错的选择：
这也是一个比较轻巧灵活的代码编辑器，文本编辑功能强大，完美支持3大操作平台，但原则上不免费，和VS Code类似，Sublime Text也支持自动补全、语法提示、代码高亮等常见功能，除此之外，针对前段开发也提供了非常多的插件，不管是编辑还是调试代码来说，都非常方便，对于前端开发来说，也是一个不错的选择：
02 IDE环境
这是一个纯粹的国产Web IDE开发工具，目前在前端开发中也有着较高的使用率，常见的自动补全、代码高亮、语法提示、错误检查等功能这个软件都能很好兼容，除此之外，界面柔绿、清爽护眼，针对Vue专门打造了插件扩展，可以很好的提高开发效率，还支持安卓、iOS打包，对于前端开发来说，也是一个非常不错的工具：
这是一个非常专业的Web IDE开发工具，Jetbrains公司的产品，被誉为“Web前端开发神器”、“最智能的JavaScript IDE”，除了基本的智能补全、代码高亮、语法提示等常见功能，这个软件还支持代码分析与重构、 联想查询、 单元测试等高级功能，因此在开发效率上更高，也更适合大型项目，对于多人协作的前端开发来说，是一个非常不错的选择：
WebStorm
和idea同属于jetbrains公司开发的，它是旗下一款JavaScript开发工具，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
早起作为一个插件可以集成与Eclipse中来开发前端，现在已经独立出来，也是我最早接触js所使用的一款开发工具，如果熟悉了Eclipse快捷键的童鞋可以快速上手。
一款代码编辑器，借助丰富的插件资源，可以扩展成强大的前端开发工具，和IDE相比，属于一款轻量级的，启动特别快。
Atom
作为开源老大哥GitHub出的一款代码编辑器，和上面那个比较而言，插件略少，但和GitHub无缝结合，尤其是markdown编写，界面也很漂亮。
TextMate是Mac下的着名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用，可以定制许多贴心使用的功能。
Emacs即Editor MACroS（宏编辑器），是一种强大的文本编辑器。Emacs使用了Emacs Lisp这种有着极强扩展性的编程语言（它的核心是一个Emacs Lisp解释器），并实现了文本编辑支持等的扩展。
Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8 技术)。
VSC-VSCode
轻量快速，高颜值，社区开源，丰富扩展，微软支持
还有超好用的远程开发(vscode remote)和协作(live share)支持
HTML通常会和JavaScript、CSS同时出现。三者均是前端开发最常用到的。目前最常用到的HTML其实就是HTML5。常用的前端编程软件有HBuilder、Sublime Text等等。
HBuilder是一款免费的国产前端开发工具，编者用的就是HBuilder，对于小白和英语不太好的前端开发者这是一款难得的IDE。对代码自动补全方面简直是强大到没朋友。强力推荐。
Sublime Text是一个轻量级的编辑器，不端支持前端的html，js，css。还支持觉得多数的后端语言，比如C语言、java、python等。sublime text的强大之处是支持各种插件而且快捷键非常好用，可以极大的提高开发效率。缺点是代码提示方面不如Hbuilder。
很高兴能回答你的问题，作为一个后端开发，也曾经开发过前端，也用过很多前端开发工具。
1.sublime text用着确实不错，但是代码开发提示不强，平时用着文本编辑器还是可以的。
2.hbuild+用了一段时间各种不适用，最后就卸载了。
3.vs code用着一段时间写vue，需要安装插件，而且提交代码用感觉不方便，把不想提交的最后提交了，导致代码冲突，也许是因为自己用不熟。
4.webstorm 推荐使用，代码智能提示，而且提交代码方便。
无论是Python、Java、javascript，当我们选择一款开发工具时，很多人都会首先想到jetbrain全家桶，Webstorm、IDEA、Pycharm....不得不说，jetbrain在开发工具方面真的是颇有心得、炉火纯青。
但是，如果做前端开发，我认为除了jetbrain的webstorm，还有很多选择，而其中我最为推荐的当属VS Code，下面就来介绍一下。
VS Code
微软在开发工具领域已经有了多年积淀，而VS Code有时微软结合了visual studio和其他开发工具，不断改进、优化推出的一款免费开发工具。
可以说VS Code是当下最为热门的开发工具之一，对比于eclipse、IDEA这些老牌开发工具，微软对于VS Code的改变更为大胆创新，已经处于领头羊的地位。每年微软开发者大会，都会对 VS Code进行大幅度的创新，经过多年的优化，VS Code已经让很多开发者爱不释手。
首先说一下它几个为人熟知的优点，
首先说一下轻量化，我觉得仅凭这一点，就足以让jetbrain全家桶汗颜。无论是webstorm、还是IDEA，最令人痛苦的就是打开过程，臃肿、漫长，加载工程项目和配置项需要多大几分钟，令人无法忍受。而VS Code则不同，它更像一个编辑器，能够秒级打开，速度堪比UE、notepad++这些文本编辑器。
其次说一下丰富插件，丰富的插件造就了VS Code完整的生态，“你想要的，这里都有”，无论是标签样式还是DEBUG或者功能增强，VS Code都有非常多热门的插件，使得你的开发效率大大提升，当然，前端需要的那些优质插件这里都有。
其实，让我转向VS Code并非上述这两点，而是 远程开发 。
我觉得这是微软大胆创新和引领者角色必然的产物，让很多其他开发工具很难望其项背。
有了VS Code远程开发功能，我们可以实时同步本地和服务器代码，不需要再去复杂的配置远程服务器，对于项目管理也非常方便。
WebStorm和PS
尤其PS，平时生活中也需要用到，挺方便的
喜欢用webstorm，atom和vs code，sublimetext都装了，几乎只用webstorm，atom界面是漂亮，也是我第一个下载安装的，装了各种插件，那时初学，感觉提示不全，还有就是插件安装了几个后开机明显变好慢，无奈下了webstorm，感觉很爽
Google PageSpeed Insights 可以为网站生成性能报告，它在移动设备和桌面设备上都是免费的。并且还给出了影响页面加载速度的原因，并为这些问题提供了解决方案。网站速度按照 100 分进行划分，其中：
2. Pingdom Website Speed Test
Pingdom Website Speed Test 可以全面分析影响页面Web速度的因素。此外，还可以查看网站在亚洲、欧洲等多个不同的地理位置的性能信息。
3. WebPagetest
WebPagetest是 AOL 开发的一款在线的免费性能评测网站，从全球多个地点运行免费网站速度测试。可以运行简单的测试或执行高级测试，包括多步骤事务、视频捕获、内容阻塞等等。还将依据测试结果提供丰富的诊断信息，包括资源加载瀑布图，页面速度优化检查和改进建议，会给每一项内容一个最终的评级。
4. GTmetrix
GTmetrix 是一个类似于 pingdom 的工具，可以快速轻松地测试网站速度。它主要有PageSpeed和YSlow两部分组成，并提供相应的得分数据，能够真实的反应出网站的性能，并且会提供可行性建议来帮助改善网站性能。
5. Keycdn Tool
Keycdn Tool 是一个在全球 10 不同地点的网站速度测试工具。它允许测试任何页面的性能。返回的结果将提供请求、内容大小和加载时间等详细信息。此外，还有一个完整的瀑布图，详细说明了每个资源的加载时间和 HTTP 头。
6. GiftOfSpeed
GiftofSpeed是一款免费网站载入速度测试工具，可以在上面获得网站综合性能信息，它能够展示网站加载时间以及评估网站有哪些需要改进的地方，并给予一个客观的综合评分。
GiftofSpeed 的测试结果以瀑布流展示，可以很容易看到网站加载速度，每一项资源的的载入顺序、大小与响应时间的长短，方便了解网站的各项载入资源。此外，它还提供了载入时间最长的内部文件以及外部文件，从而分析出是由哪些因素影响了你网站的载入速度，就可以专门针对这些载入时间较长的元素进行优化，从而最大限度提升网站载入速度。
7. Pagelocity
Pagelocity 是一个网站分析性能测试工具。这个工具也提供了追踪竞争对手的能力。代码检视图在类似工具中是独一无二的。如果想知道 TTFB 和图形化 DOM 元素等，都能通过这项工具获取到。
8. Sucuri Loadtime Tester
Sucuri Load Time Tester 是一个网站分析性能测试工具，它用不同的颜色表示网速快慢，可以很直观地看出测试网站在不同国家的运行速度。绿色表示畅通，没有颜色的普通数字表示一般，黄色表示中等偏慢，红色表示缓慢。
9. GEEKFLARE
GEEKFLARE 这是一套免费的性能测试工具，用于测试网站的 DNS、安全性、性能、网络和 SEO 等问题。
10. Dareboost
DareBoost 是一个免费网站速度测试和网站分析工具。它提供超过 100 种不同的检查项目用以分析你的网站的速度。可以测试桌面端与行动页面、Firefox 与 Chrome 和五个节点的速度差异。
E. Web前端开发需要哪些工具
前端开发中需要掌握最基础的技能就是HTML、CSS，JavaScript。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互，在进行开发前，需要对这些概念弄清楚，才能进行合理的开发。
在网页建设的过程中，为了避免代码的繁琐杂乱，更高效快速地完成任务，就会使用到一些有代码高亮提示和语法提示等便捷功能的前端开发工具。
1，Dreamweaver：中文名“梦想编织者”。是集网页制作和管理网站于一身的所见即所得网页代码编辑器。它可以使用所见即所得的接口，亦有HTML编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。 使用视觉辅助功能减少错误并提高网站开发速度。
2，Sublime：Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。
3，HBuilder：是DCloud,推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
有了工具，接下来还得靠我们人来操作。你必须熟悉三种语言，把这些概念弄明白，才能开发出好的作品。
F. web前端打包工具有哪些
工具很多，目前常用的是webpack， grunt等，在没出现更好的工具之前，学好这两个其中的一个基本都够用了。
G. 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs
vue：
vuejs 文档比较齐全，vue吸取了angularjs
的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，
同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router （spa框架）。
vue学习地址：http://cn.vuejs.org/
以上说了那么多没用的，下面就来点干活了！
我的前端组件化架构设计，目录如下：
项目架构用到的知识点，还是挺多的，知识清单如下：
［1］： gulp + webpack 构建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等
[2] : postcss-custom-properties : 用来做样式全局化， 只需要通过变量去维护，通过编译变量既可以换肤。
[3] : vue-loader （vue文件组件化）：用来去编译处理 *.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件， vue 文件结构如下：
[4] ： babel-loader ：实现对vue文件中 es6 语法的编译解析
[5] ： vue-router ：用来做路由分发，而且文档非常的齐全（学习地址：http://vuejs.github.io/vue-router/zh-cn/index.html）。
[6] ： vue （插件式方式）：vue本身提供了一个install 方式用来注入，我们可以注入一些全局的（属性、方法、以及通用的ui组件）。
下面说说文件夹的含义：
common 文件夹： 是用来存一些通用的东西，比如样式，以及全局的js等等
components 文件夹：用来放独立的组件，我打算后期做细分，ui 组件，以及page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。
filters 文件夹：用来放通用的过滤器操作。
plugins 文件夹：用来放 Vue.use 注入到Vue全局的插件库，比如：请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。
views 文件夹： 用来存放页面模块
app.vue 文件：第一次启动的主程序模块
app.js 文件：启动前的加载，注入，实例化
router.config.js 文件：路由模块
目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。
H. 前端打包,怎么只替换修改的文件,而不是整个项目替换
使用打包工具后无法之修改制定的文件
1、打包工具是在源码发生了变化后重新打包编译源代码，打包工具并不能区分具体生成后打哪些文件发生了变化
2、所以如果打包整个项目比较慢的话可以考虑优化打包速度，一般是不支持只替换修改的文件的
I. 前端项目gulp编译工具打包慢怎么办
下面几个插件，按需索取哈，反正我是都有了。
有多文件用的，有对dev-watch时用的，都有效果。
https://www.npmjs.com/package/gulp-cache
https://www.npmjs.com/package/gulp-cached
https://www.npmjs.com/package/gulp-remember
https://www.npmjs.com/package/happypack
先上图
等views下面业务模块有50+，widget目录下面有20个左右。。。那编译一次真的是呵呵呵
所以我们增加了一个.localBuildConfig.js
让同学们只编译/监听自己想要的文件即可，同时在编译log中给予提示
J. 前端构建工具和打包工具有啥区别
Webpack是一个前端模块化方案，更侧重模块打包。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
Webpack就是需要通过其配置文件（Webpack.config.js）中 entry 配置的一个入口文件（JS文件），然后在解析过程中，发现其他的模块，如scss等文件，再调用配置的loader或者插件对相关文件进行解析处理。
两者区别
虽然Gulp 和 Webpack都是前端自动化构建工具，但看2者的定位就知道不是对等的。Gulp严格上讲，模块化不是他强调的东西，旨在规范前端开发流程。Webpack更明显的强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
以上就是介绍的前端构建工具 Gulp 和 Webpack，以及两者之间的区别。如今互联网发展迅速，Web前端人员也应该与时俱进的不断学习。