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

開發中，我們很多時候只需要關心業務程式碼，而不用過多關心業務以外的，打包、相容、優化、部署等等工作。

簡單說，工程構建就是打通開發鏈路，讓開發可以專注於專案本身。

解決了什麼

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

• 大量js檔案通過script標籤引入，造成管理困難，頁面載入緩慢。

• css編寫效率低，相容性問題多，全靠手動自己解決。

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

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

等等很多效率低下、易犯錯，與業務本身無關的繁瑣工作。

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

工程構建介紹

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

1.1 打包

將原始碼打包成使用者訪問的優秀程式碼。

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

通過打包，可以讓打包工具自動幫我們管理包依賴，程式碼壓縮，頁面相容。

並且可以讓我們在開發和生成環境中，支援es6等語法，提升開發效率。

1.2 自動化

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

一方面是我們在程式碼打包中提到的，省去人工的程式碼壓縮、相容等工作。

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

1.3 其他輔助功能

還有更多優秀的作用。

舉個我們推啊專案中的栗子：

通過webpack外掛，自動使css中的背景圖支援webp，減小使用者載入圖片的體積。

End

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