1. 前端项目打包部署
通过vue-cli和webpack构建的项目体积一般都较大，在生产环境下，需要进行打包部署。
1.准备
2.打包
3.部署
一闪而过
输入 http://localhost/dist ，可以看到项目运行结果
2. 如何将html5程序打包成Android应用
问题分析：
html5网站主要由html+css+js的形式组成，需要使用浏览器进行展现。
Android需要使用Java语言来开发，对于前端工程师来说，无疑是增加了很大的难度。
随后出现了很多打包工具，来协助我们将网页元素打包成手机app，将我们编写的html转化为Java语言。
解决方案：
推荐一款我们常用的打包工具：HBuilder。
该工具不仅提供了Android应用打包，还可以直接连接手机进行调试，配合HTML5+可以实现很多Android原生的功能。比如：扫码二维码，拍照，摇一摇等等。
具体操作步骤：
1、真机调试
②勾选Android复选框，如果使用Dcloud公用证书的话，可以直接进行打包，手机可以安装使用。如果需要上传发行到第三方应用平台的话，需要使用自有证书，自用证书可以使用JRE自带的创建和管理数字证书的工具Keytool来生成自有证书，生成过程是免费的。
勾选Android选项后，在下方表单中填写Android包名，为保证唯一性，可以使用自有网站域名的反写方式加上应用名称。如果使用自有证书的话，还需要填写证书别名，密钥密码，证书文件。
填写完毕后，点击打包，即可生成apk文件。
其他注意事项：
1、在开发过程中，不需要进行打包，应更多的使用真机调试，可以节约很多时间。
2、开发完毕后，尽可能在各种版本的android机器上做一下测试，因为一些网页的样式在不同的android版本中呈现的效果略有不同。
3、重新编辑一下html5网站代码，将一些网页功能转换为手机功能，比如网页元素的<a>标签跳转，就应该使用Webview来完成。可以解决页面切换白屏的问题，还可以提高网站在手机中的运行效率。
3. Webpack前端项目打包配置
1、安装依赖包
初始化项目为nodejs项目
另一种是在html中通过img标签的src引入，因为webpack对html支持不友好，所以需要借助插件html-webpack-plugin
第三种是借用拷贝插件，直接强行拷贝所有图片，因为本项目图片是在xslt中引用，所以采用第三种和第一种结合的方式处理图片，在plugin参数中添加
如果css是与其余的css一起打包，那么其中对fonts资源的引用路径也会自动发生变化，一定注意，是个大坑！！
4. 前端打包gzip + nginx开启静态gzip
服务端动态gzip是常见的方案，即服务端判断浏览器http请求头中的Accept-Encodin是否有gzip，有的话就说明浏览器支持gzip服务器就实时压缩生成gzip返回给浏览器，否则就返回原文件。但是这种模式是比较消耗服务器CPU的，如果前端打包的时候就压缩好，把原文件和gzip文件全丢到服务器上，服务器不干压缩的活，只区分浏览器是不是支持gzip，支持就返gzip文件，不支持就返原文件，那就能省去服务器动态压缩的环节。
PS：因为Linux系统下nginx不能向磁盘写文件，所以服务端只能实时生成。
PS：服务器数量少的条件，就不要用nginx动态压缩了。
不同的前端框架配置gzip的方式不一样，这里不多说，网上方法非常多。这里我用的VUE，可以参考下：
1、前端文件部署到服务器后，在nginx.config的目标应用location下配置 gzip_static;
gzip_static on;
gzip_http_version 1.1;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
gzip_vary on ;`
说明nginx的编译参数缺失，需要添加--with-http_gzip_static_mole参数，然后重新编译：
3、验证静态gzip是否生效：
5. node 和 reactrewired 修改 React 打包目录的流程
基于 SpringBoot + React 前后端分离的工程，为了便于打包，通常需要配置 React 项目的打包目录为 SpringBoot 工程的 resources/static ，并在 pom.xml 打包插件中配置 prepare-package 阶段执行 npm run build 先打包前端 React 工程。
这样比从 dist 目录下拷贝前端文件到 static 目录方便多了，本文记录两种不同前端打包插件配置 React 打包目录的方法。
创建的工程包含一个 scripts 目录， package.json 中的脚本配置为：
修改步骤如下：
第一步 ，执行 npm run eject 先导出配置文件。
第二步 ，修改 config/paths.js 中的 appBuild 配置为 Web 工程的静态文件目录，例如：
package.json 中的脚本配置为：
该场景需要修改创建配置文件 config-overrides.js ，添加 appBuild 配置，步骤如下：
第一步 ，在根目录下创建文件命名为 config-overrides.js 。
第二步 ，编辑文件，写入定向配置：
一个 React 项目前后 package.json 配置的脚本内容不一样，后面用的 react-app-rewired 插件，导致先前配置的 appBuild 不生效。
与备份项目对比，发现前后用的打包脚本不一样，才知道了修改 React 的打包目录还有这种方法。
相比于 node 脚本， react-app-rewired 插件不需要导出配置文件，直接添加 appBuild 更方便一些！
6. 怎么将网页打包成桌面应用（web前端页面
在 HTML5的崛起、JavaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在 Windows、Linux、Mac、IOS、Android 等平台运行，大大降低了程序员的工作量，也使公司的产品可以快读迭代。曾经跨平台技术的不被看好，如今随着手机、电脑硬件的发展而快速发展。这一切，几乎由HTML5技术推动，当然，JavaScript 这个语言，是最大的功臣。
基于 HTML5 的跨平台技术比较出名的有 PhoneGap、Cordova，常常用于开发 webapp；还有 Egret、Cocos-creator、Unity 等，常用于开发游戏；还有基于 Node.js 的 nw.js，用于开发桌面应用，以及 Electron，一款比 nw.js 还强大的用网页技术来开发桌面应用的神器。
其实，以上都是废话，现在进入主题：怎么用 Electron 将网页打包成 exe 可执行文件！
假设：
1、你已经安装并配置好了 node.js （全局安装）
2、你已经用 npm 安装了 electron （全局安装）
3、你已经写好了前端网页（html、css、javascript 这些，或者基于这些的前端框架写好的网页）
4、以上三点看不懂的，赶紧去网络。。。
你如果具备了以上的假设，请继续往下看：
1、找到你的前端网页项目文件夹，新建 package.json、main.js、index.html 三个文件（注：其中的 index.html 是你的网页首页）
你的项目目录/
├── package.json
├── main.js
└── index.html
2、在 package.json 中添加如下内容
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"}
3、在 main.js 中添加下面的内容，这个 main.js 文件就是上面 package.json 中的 "main"键 的值，所以可根据需要修改
const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
4、如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名
5、打开 DOS，cd 到你的项目目录（或直接在你的项目目录下空白的地方 shift+鼠标右键，然后点击在此处打开命令窗口，这里看不懂的，唉，网络吧少年）
6、在上一步的 DOS 下，输入npm install electron-packager -g全局安装我们的打包神器
npminstallelectron-packager-g
7、安装好打包神器后，还是在上一步的 DOS 下，输入electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可开始打包
electron-packager . app --win --out presenterTool --arch=x64
--version 1.4.14 --overwrite --ignore=node_moles
这个命令什么意思？蓝色部分可自行修改：
electron-packager .可执行文件的文件名--win --out打包成的文件夹名--arch=x64位还是32位--version版本号--overwrite --ignore=node_moles
以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。
如果你打包总是不成功，觉得很烦，同时对扩展功能没什么要求的话，
里面有我已将内容为 hello,world 的 index.html 网页通过 Electron 框架打包为 windows 环境下的桌面应用。
现只需将你的网页前端项目复制到 /resources/app/project 目录下，双击 exe 文件即可以桌面应用的方式运行你的网页。
7. docker部署前端和后端打包程序
docker启动命令：
nginx.conf修改为：
程序更新：每次只需要把前端vue打包程序更新到/data2/geovis/docker_nginx/nginx_share_dir下即可。
Dockerfile文件内容：
start.sh内容(最后一个jar包不能后台运行，否则容器会自动退出)：
构建docker镜像
启动geovis-jar容器：
程序更新：每次只需要docker restart geovis-jar重启容器即可。
8. 前端本地打包命令和安装配置时的配置有关吗
前端本地打包命令和安装配置时的配置有关系吗？谁也离不开谁呀，他们之间的包装命令包装配置都是相互关联的，相互配合的，所以说你不能缺少了它，你缺少了它就少了一半，所以说它就不合格了，所以说前端本地打包命令和安装时的配置有关系的。
9. 前端打包,怎么只替换修改的文件,而不是整个项目替换
使用打包工具后无法之修改制定的文件
1、打包工具是在源码发生了变化后重新打包编译源代码，打包工具并不能区分具体生成后打哪些文件发生了变化
2、所以如果打包整个项目比较慢的话可以考虑优化打包速度，一般是不支持只替换修改的文件的
10. 【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
通过对打包后的文件分析，基本可以完全理解打包过程。