h5打包

类别	说明
移动 App	使用安卓/iOS/前端技术开发移动端的应用程序，包含原生App 和混合App
原生 App	使用安卓的 Java 和 iOS 的 OC 或者 Swift 语言开发出来的应用程序(ReactNative 可以让我们使用前端的技术开发原生App，Vue+Weex,Angular+Ionic,Cordova)
混合 App	使用前端的技术开发出来的移动端应用程序
移动 web	移动端运行在浏览器的网页
webApp	一般也指移动web,webApp 也可以离线运行(同样也是运行在浏览器中，但是由于有缓存可以离线运行)

打包

H5+/Ionic/Codova混合App(运行时才会将前端代码进行编译，打包时只用加壳) RN/Weex原生App(在打包的时候就已经编译成原生语言，运行时不用编译，效率更高)

ionic 打包

1. 全局安装打包工具

npm install cordova -g
npm install ionic -g

2. 创建项目

ionic start xxx

3. 打包 App

ionic platform add android 添加项目平台安卓
ionic run android 运行在手机

环境配置

Java 环境配置

• 安装 Java JDK
• 系统变量中添加 JAVA_HOME，值为 jdk 的路径
• Path 环境变量中添加%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
• 在 CLASSPATH 环境标量中添加.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
• 打开 cmd 命令行，执行 javac 验证是否 Java 环境已配置正确

Android 环境配置

• 安装 Android SDK
• 安装 build-tools 到 android-sdk 根目录
• 安装 platform-tools 到 android-sdk 根目录
• 安装 platforms
• 安装 tools 到 android-sdk 根目录
• 新建 exttras\android，将 m2repository 和 support 解压到该目录
• 系统变量中添加配置 ANDROID_HOME，值为 sdk 路径
• Path 中添加 Android 的环境变量%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
• 配置完毕后在 CMD 命令窗口中输入 adb 验证是否配置正确

或者使用 androidStudio（开发工具，打包工具，只能打原生安卓项目）也可以安装安卓开发环境

Cordova

1. 安装 npm i -g cordova
2. 使用 cordova 创建项目模版 cordova create myCordova
3. 将已经开发好的移动 web 项目拷贝到 myCordova 中的 www 目录
4. 使用 cordova 命令进行运行或者打包

cordova run android 运行在安卓手机
cordova build android打包城apk文件
cordova platfrom add browser 添加一个平台
cordova platfrom add android

Webpack 配置

在 package.json 中

"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 8099",
"develop": "webpack-dev-server --config webpack.develop.config.js --devtool eval-source-map --progress --colors --inline --hot --content-base ./dist",
"publish":"webpack --config webpack.pub.config.js"
}

在 webpack.develop.config.js 中 url-loader打包文件和图片以及处理icon字体的加载器

npm install url-loader file-loader -D

{ // 处理图片操作
     test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader?limit=25000&limit=5000&name=images/[hash:8]-[name].[ext]'
},{
   test:/\.(eot|woff|ttf|woff2|svg)$/,
    use:'url-loader?limit=2500&name=fonts/[name].[ext]'
}
在.babelrc中
{
"presets":["es2015","react"]
}