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
通過對打包後的文件分析，基本可以完全理解打包過程。