#頭号周刊#
由于前端開發的特殊性，比如前面章節提到的浏覽器對 ES 規範的實作程度、 CSS 預編譯器等，開發者直接編寫的源代碼并不能在宿主浏覽器中正确無誤地運作。建構是前端工程體系中功能最煩瑣、最複雜的子產品，承擔着從源代碼到可執行代碼的轉換者角色。 webpack 是一款功能強大且高度可擴充的建構工具，本章通過列舉前端建構中需要解決的具體問題案例，講解如何使用 webpack 實作相應的建構功能。
本章主要包括以下内容。
建構功能解決的問題。
規範和 API 設計原則。
使用 ECMAScript 最新規範開發的優勢以及對應的建構方案設計。
CSS 預編譯器和 PostCSS 各自的作用和差別以及對應的建構方案設計
JavaScript 子產品化規範與 webpack 支援性。
針對浏覽器緩存政策的建構功能的設計。
資源定位功能的設計與實作。
3.1建構功能解決的問題
在 Grunt 、 Gulp 、 webpack 等前端工具出現之前，前端資源的建構需要借助于其它開發領域的工具實作，比如 Ant '、 Make '等。
甚至專業建構 JavaScript 和 CSS 的工具也需要特殊的程式設計語言執行壞境，比如 YUI composer 最初需要依賴 Java 運作環境。 Node. js 的誕生和發展令前端工具生态不斷壯大，目前我們所熟知的 Grunt 、 Gulp 、 webpack 等工具均是由 Node . js 為底層驅動平台的。
Node . js 是前端工具得以發展的技術基礎，前端項目的不斷複雜化是催動前端工具發展的環境因素。在 Node . js 誕生之前，對于前端資源的建構工作隻是進行基本的壓縮和打包，因為當時前端項目自身的複雜度并不高，沒有子產品化開發、規範轉譯、 CSS 預編譯等現在看來非常普遍的需求。
建構，或者叫作編譯，在前端工程體系中的角色是将源代碼轉化為宿主浏覽器可執行的代碼，其核心是資源的管理。前端的産出資源包括 JS 、 CSS 、 HTML 等，分别對應的源代碼則是：
領先于浏覽器實作的 ECMAScript 規範編寫的 JS 代碼。
LESS / SASS 預編譯文法編寫的 CSS 代碼。
Jade / EJS / Mustache 等模闆文法編寫的Н TML 代碼。