Ⅰ 前端構建工具和打包工具有啥區別
Webpack是一個前端模塊化方案，更側重模塊打包。我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（載入器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
Webpack就是需要通過其配置文件（Webpack.config.js）中 entry 配置的一個入口文件（JS文件），然後在解析過程中，發現其他的模塊，如scss等文件，再調用配置的loader或者插件對相關文件進行解析處理。
兩者區別
雖然Gulp 和 Webpack都是前端自動化構建工具，但看2者的定位就知道不是對等的。Gulp嚴格上講，模塊化不是他強調的東西，旨在規范前端開發流程。Webpack更明顯的強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。
以上就是介紹的前端構建工具 Gulp 和 Webpack，以及兩者之間的區別。如今互聯網發展迅速，Web前端人員也應該與時俱進的不斷學習。
Ⅱ 怎麼講前端的代碼打包成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
Ⅲ 前後端分離的前端是怎麼部署到生產環境中的，直接通過 nginx 嗎
front-end-separate(前後端分離腳手架)
front-end-separate
一個前後端分離的腳手架工具（自主研發）
為什麼選擇grunt而不是gulp
如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你
所有靜態資源都md5全並壓縮打包,css,js,img,html
已在生產環境驗證
基於express和grunt的前後端分離框架
模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標簽都簡化了
express提供路由服務
項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）
開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目
項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon
支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）
基於grunt md5 打包合並
線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）
Ⅳ 前端環境配置的問題，前端人員需要安裝後台環境嗎團隊
做前端不用搭建後台啊，後台的搭建是做後端的人搭的，在公司里都是後端的人直接把前端的頁面拿過去就行了
Ⅳ 前端開發需要配置什麼環境
web前端開發環境的搭配：
A、Sublime3安裝配置：
Sublime跨平台的前端開發神器,是一個共享軟體,免費使用；下載最新Sublime3安裝包；
-官網地址:http://www.sublimetext.com/
-安裝包管理器
打開Sublime3控制台,ctrl+~
輸入安裝包管理器命令代碼，注意需要聯網才能安裝,因為是在線下載包
包管理器的官網地址:https://packagecontrol.io
-安裝第三方插件(包)
打開命令面板:ctrl+shift+p；
輸入install,然後回車，然後可以搜索想要的插件,回車安裝；Atom工具使用
B、Atom工具使用：
由github發布的前端開發工具，集成了chrome的調試工具，是一款非常強大和開發的開發工具平台。在file裡面的setting裡面進行設置,包括字體的大小,快捷鍵,背景顏色主題等；
官網地址：https://atom.io/
C、WebStorm10的安裝與使用：
WebStrom是最專業的前端IDE開發工具，是一個非常重量級的開發工具,是專業為我們前端設計的IDE,用他來開發是效率非常高；
D、總結三款開發工具的優劣：
Sublime3:需要安裝第三方的包，一般。Atom：集成度非常好，也很輕，需要自己安裝第三方的包。Webstrom：大項目，建議使用webstrom，非常強大，但是也很重。
Ⅵ 前端入職需要安裝什麼環境
一、基礎環境
Node.js是JavaScript運行時，目前前端工程化必不可缺的一個環境。通常我們會選擇穩定版本(LTS)進行下載。
NPM是javascript的包管理工具，也是目前Node.js默認的包管理工具。一般下載了Node.js後會附帶npm，不用專門的去下載。
YARN是Fackbook開源的依賴管理包，和npm是做同樣的工作，但相比npm安裝依賴的速度會更加迅速。兩者都是講依賴寫入package.json中，在使用習慣上是相近的。
Git是最先進的代碼版本控制軟體。
二、開發環境
編輯器
目前前端開發主流的編輯器有sublimeText、WebStorm、vscode，三種主流器各有特點:
sublimeText是一個十分輕巧的編輯器，編輯器是付費軟體，可以無限試用。在 macOS 上下載該軟體僅需 15.2MB. 需要安裝相應的插件，比如你可能需要某個語言的語法高亮，因此你需要在 store 上找到相應插件來提高你開發體驗。
webStorm是一個功能強大的編輯器，同時也是一個付費軟體，並不像sublimeText那樣可以無限試用，由於功能太過於齊全，一些低配置的電腦可能會吃不消。以上特點是群友對webStorm的評價，筆者沒有使用該編輯器，不過多評論。
vsocde是由微軟開源的一個編輯器，雖然是後起之秀，但開源後該編輯器的設計與體驗迅速吸引了一大批用戶。它內置了一些前端基礎的開發環境，針對Node.js還可以進行短點調試。
vscode其中有一個插件叫做setiings sync, 它可以將你的編輯器配置上傳至gist。就算你換了一個全新的設備，下載vscode後，再下載該插件，傳入Token後就可以同步你所有的配置，十分的方便~
vscode的配置可以查看具體教程
瀏覽器
前端的工作更多時候是與用戶打交道，我們的工作產出通常在瀏覽器頁面上呈現。
瀏覽器通常提供了開發者工具以供開發者調試，目前市面上主流的瀏覽器主要就是chrome、Safari、IE/Edge、opera、firefox這五種瀏覽器。國內市場有UC瀏覽器等，但內核的大多都是採用webkit或者兼容低版本IE內核。
從statcounter 統計數據來看，目前主要的趨勢還是以chrome所使用的webkit內核作為主流，同時chrome的開發者工具對於開發人員十分的友好，因此有很多的開發者選擇了該瀏覽器作為首選的調試工具。chrome還有一個便利就是登陸了谷歌賬號後，可以在別的機器上進行同步插件和配置。
Ⅶ 前端項目打包部署
通過vue-cli和webpack構建的項目體積一般都較大，在生產環境下，需要進行打包部署。
1.准備
2.打包
3.部署
一閃而過
輸入 http://localhost/dist ，可以看到項目運行結果