前端工程構建總結

什麼是前端工程構建，咱們先回想一下。

開發中，咱們不少時候只須要關心業務代碼，而不用過多關心業務之外的，打包、兼容、優化、部署等等工做。

簡單說，工程構建就是打通開發鏈路，讓開發能夠專一於項目自己。

解決了什麼

在擁有較完善的工程構建之前，前端常常面臨這些問題：

• 大量js文件經過script標籤引入，形成管理困難，頁面加載緩慢。

• css編寫效率低，兼容性問題多，全靠手動本身解決。

• 常常耗費大量時間手動傳資源到CDN，改靜態資源路徑。

• 甚至手動拷貝代碼到後端工程。

等等不少效率低下、易犯錯，與業務自己無關的繁瑣工做。

而前端工程的完善，就是幫助開發去解決以上問題，讓開發用的爽。

工程構建介紹

概括起來，工程構建包括這3個方面：打包；自動化；其餘輔助功能；

1.1 打包

將源碼打包成用戶訪問的優秀代碼。

利用webpack等打包工具，將代碼文件打包，生成公共和頁面的js、css文件，以及最終可用的html文件

經過打包，可讓打包工具自動幫咱們管理包依賴，代碼壓縮，頁面兼容。

而且可讓咱們在開發和生成環境中，支持es6等語法，提高開發效率。

1.2 自動化

人工操做繁瑣易出錯，能省則省。

一方面是咱們在代碼打包中提到的，省去人工的代碼壓縮、兼容等工做。

另外一方面是打包後自動更新html中地方資源路徑，自動上傳CDN，自動部署等操做。

1.3 其餘輔助功能

還有更多優秀的做用。

舉個咱們推啊項目中的栗子：

經過webpack插件，自動使css中的背景圖支持webp，減少用戶加載圖片的體積。

End

前端工程構建做爲前端架構的一個子集，在推啊前端er的共同努力下，正在變得愈來愈自動化，愈來愈好用。