① 常見的前端構建，打包工具有哪些
事實上前端構建過程一般都是建立在前後分離基礎上的，你要想讓自己的構建過程清晰、簡單和方便，請首先將自己的項目前後實現分離。當然這個有難度，所以你的這個場景並不是非常適合gruntjs通常的構建模式。 對應問題講完，再給你一些建議。
② 前端打包用什麼
一、webpack介紹
經常聽到前端的大佬們說是用webpack打包的，那麼到底webpack是個什麼東東呢？
1、webpack是什麼
Webpack 是一個前端資源載入/打包工具。它將根據模塊的依賴關系進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。webpack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其他的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。
2、webpack的核心作用
模塊化開發中，我們會編寫大量模塊，如果不打包就進行上線，那麼頁面載入或交互時，將會發起大量的請求。為了性能優化，需要使用webpack這樣的打包器對模塊進行打包整合，以減少請求數。就像簡單的vue項目，所有組件最終將被打包到一個app.js中。相較於無差別打包依賴模塊的傳統打包器（Grunt和Gulp等），webpack的核心優勢在於它從入口文件出發，遞歸構建依賴關系圖。通過這樣的依賴梳理，webpack打包出的bundle不會包含重復或未使用的模塊，實現了按需打包，極大的減少了冗餘。
二、npm介紹
介紹了webpack，我們可能會疑問，我的JS，CSS，HTML文件分開寫，挺好的呀，為什麼要使用webpack工具，進行復雜的各項配置。在傳統前端開發模式下，我們確實是按照JS/CSS/HTML文件分開寫的模式就可以，但是隨著前端的發展，社區的壯大，各種前端的庫和框架層出不窮，我們項目中可能會使用很多額外的庫，如何有效管理這些引入的庫文件是一個大問題，而且我們知道基於在HTML中使用
npm 由三個獨立的部分組成：網站、注冊表（registry）和命令行工具（CLI）
網站是開發者查找包（package）、設置參數以及管理npm使用體驗的主要途徑。
注冊表是一個巨大的資料庫，保存了每個包（package）的信息。
CLI通過命令行或者終端運行。開發者通過CLI與npm打交道。
一般來說提起npm有兩個含義，一個是說npm官方網站，一個就是說npm包管理工具。npm社區或官網是一個巨大的Node生態系統，社區成員可以隨意發布和安裝npm生態中的包，也就是不用在重復造輪子了，別人造好了，你直接安裝到你的項目中就可以使用，但是因為前面說了，當包引入數量很多時管理就成為了一個問題，這個就是npm為開發者行了方便之處，npm已經為你做好了依賴和版本的控制，也就是說使用npm可以讓你從繁雜的依賴安裝和版本沖突中解脫出來，進而關注你的業務而不是庫的管理。
而webpack就是將你從npm中安裝的包打包成更小的瀏覽器可讀的靜態資源，這里需要注意的是，webpack只是一個前端的打包工具，打包的是靜態資源，和後台沒有關系，雖然webpack依賴於node環境。
三、webpack npm node之間的關系
webpack是npm生態中的一個模塊，我們可以通過全局安裝webpack來使用webpack對項目進行打包。
webpack的運行依賴於node環境，沒有node是不能打包的，但是webpack打包後的項目本身只是前端靜態資源，和後台沒有關系，也就是說不依賴於node。
npm產生於node社區，是node的官方包管理工具，當安裝好node的時候，npm就自動安裝好了。
正是因為npm的包管理，是的項目可以模塊化的開發，而模塊化的開發帶來的這些改進確實大大的提高了開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓 瀏覽器識別，而手動處理又是非常的繁瑣的，這就是webpack工具存在的意義。
③ 前端項目打包後536.5KB算大嗎
前端項目打包後536.5kb大小確實有點大了，不過要看你做的什麼項目。
④ 前端打包問題
你要開發一個公共包，但是又不了解js知識，那就把js當java對待就可以了
這個包依賴jQuery，那麼打包後的主文件不一定將jQuery也打包進去
這個打包後的主文件不一定不再依賴其它任何js文件
請採納
⑤ web前端打包報錯 webpack 打包成功但是會報錯 怎麼解決
別用整體打包了，容易出錯是一方面，重要的是太大！太大了，打包後的文件載入太耗時！太影響用戶體驗，太影響性能。直接用JS混淆加密，Jshaman， 經驗之談！
⑥ web前端打包工具有哪些
工具很多，目前常用的是webpack， grunt等，在沒出現更好的工具之前，學好這兩個其中的一個基本都夠用了。
⑦ 怎麼將網頁打包成桌面應用（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 文件即可以桌面應用的方式運行你的網頁。
⑧ 怎麼講前端的代碼打包成web app
方法/步驟
下載安裝MyEclipse2014，Android SDK，eclipse(需配置Android開發環境)
Java和Android環境安裝與配置，將另寫經驗分享，讀者也可網路參考其他相關資料，自行安裝
打開MyEclipse2014，新建一個HTML5 Mobile Application Project，命名，例如：hello
html5程序在工程www目錄下編輯；
編輯好我們的html5程序，下面就要開始學習打包了
這里介紹兩種打包方式：1、PhoneGap Build Service 打包
PhoneGap官網有相關教程可參考，不具體介紹
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好，android開發環境)：
Step1、啟動eclipse，新建Android Application Project，即Android工程，命名，例如：hello
Step2、將前面Myeclipse2014中編輯好的HTML5程序(www整個目錄）拷至剛剛在eclipse新建hello工程對應assets目錄下面
Step3、下面要做的就是如何將我們的HTML5程序在Android應用中啟動，這里我們要使用Android系統自帶的WebView控制項（具體信息參考Adroid開發文檔）---在工程下找到res->layout->activity_main.xml並打開，向裡面插入WebView控制項，編輯好自己想要的樣式
Step4、在主程序入口，用剛剛編輯好的WebView控制項將HTML5程序引入，此時，主體功能已實現，編譯工程即可得到apk
⑨ 上級給你一個打包好的前端項目應該怎麼看
解壓後觀看
⑩ 可以將前端文件夾打包成一個獨立.html文件直接打開使用嗎
引用使用相對路徑，或者製作成Electron應用