在前端刀耕火種的年代，佈局用 table 標籤，CSS 樣式大量內聯；校驗 JS代碼是否規範，需要複製代碼到 jshint（相信很多 “前輩” 對此都不陌生）；壓縮合並代碼，也是通過壓縮工具壓縮完再複製到一個文件裏；修改了代碼要查看效果，必須手動刷新瀏覽器；代碼寫好了要發佈到服務器，需要用 FTP 軟件上傳，等等等等。

其實嚴格來説，那個時候還沒有前端開發這個職位，那個時候叫切圖仔或者頁面仔，隸屬於設計部或者其他什麼部。CSS 不能預編譯，也沒有模塊化，不能自動打包，而今天，這些都只要使用前端構建工具就可以實現了，我們也有了專門的前端開發崗位。如果當時的前端開發者穿越到現在，他一定會非常驚訝，並以為自己做了個假前端。

簡單的來説，前端工程化就是把一整套前端工作流程中能用工具搞定的部分用工具搞定。

起源

前端的工程化

前端這個職位的誕生也有短短的十年。而在十年之前，我不認識你，那會還叫網頁製作，用着一個Adobe非常牛逼的軟件叫Dreamweaver。這是一個神奇的軟件，絢麗多彩的網頁通過它，拖拖拽拽，就這麼夢幻般的生成了。網頁製作師們，像一羣織夢的婦人，心靈手巧，耐苦耐勞，從不抱怨。

我為什麼這麼強調前端工程化

WEB 前端開發這幾年發展非常迅速，非常多的開發框架和構建工具涌現，可能你昨天還在用的工具、插件，到了今天就過時了。在 2 年前，我面試別人的時候，會問一些有沒有接觸NodeJS、 Grunt、gulp、ES6、Babel 這類技能的問題，超過半數的面試者會回答『沒有』，或者説『只是剛剛接觸，並不是很深入』。迫於招人急迫，我並不會直接説 NO，然後繼續問一些 HTML、CSS、JS 前端三板斧的知識。 然而今年，如果應聘者不會這些技能，那真的很抱歉， 我不會接受一個沒有走在前沿的開發者 。任何面試者都不會喜歡一個墨守成規的人。難道沒人告訴你，外面的世界已經變了嗎？

前端工程化知識要點回顧&思考

前端工程化相關問題是隨着前端的發展越來越受到重視的問題，一套好的工程化解決方案能在提高開發效率(包括代碼編寫的舒適度及多人協作)的同時確保整個系統的伸縮性(各種不同的部署環境)及健壯性(安全)，同時在性能上又能有一個很優異的表現(主要上各種緩存策略加載策略等)，而且這套方案又應該是對工程師無感知(或感知很小)趨於自動化的一套方案。總之，要達到這個目的前端工程化還有很長一段路要走。

F++：別忽略前端工程化的部署與測試

前端工程可以説是軟件工程的一個細分領域，流程相似，但特點鮮明。先來説説前端，當然我指的是Web前端，相比其他方向的技術有什麼特點：

• 説起前端，至少涉及3種語言。（html，css，javascript）

• 前端代碼在用户端運行時增量安裝。（摘自張雲龍的文章，資源和代碼都是增量下載的）

• 最基本的狀況下，前端代碼不需要編譯（即改即生效）。

• 瀏覽器即運行環境，非常易於調試和開發（不需要simulator）。

工欲善其事

我終於弄懂了各種前端build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……諸多的名詞讓你一時間感到手足無措，好像根本學不完。 其實關鍵就是，不要被它們唬住。要知道，所有這些工具，其最初的設計目的，都是要讓你的工作變得更簡單。 要想弄明白這些工具是什麼、如何工作以及為何要使用它們，你其實只需要抓住少數幾個核心概念。

前端工程化工具初選

面對日益紛雜的前端工具，作為新人常感無從下手。經過一番檢索和簡單對比，再結合自己的喜好，篩選了將要學習和使用的工具，以適應日益工程化、專業化的 Web 前端開發工作。

寫給後端看的前端技術——webpack（上）

不懂“前端”説的virtual dom、ReactJS、Vue、Angularjs這一大堆東西，也不懂前端説的ES6的優雅，也不知道為啥我用Bootstrap、jQuery就得“剁手”。世界上總得有一篇文章是寫給後端工程師看的，後端寫給後端看的，不裝逼，認認真真。我決定用webpack作為學習前端的第一步，一方面是由於“Build工具”幾乎是學習前端的第一道門檻；另一方面它已經“千秋萬代一統江湖”了所以請無視——gulp、grunt之類的吧。

php工程獅感知的前端工作流程

這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！最近做了一些總結，之前都是迷迷糊糊，搞不清楚前端之前的相關定位。好好梳理了一下。錯誤之處請各位指正。

本文主要説的是 JavaScript 工作流程。

前端工程化

從零開始，教你如何開始前端自動化

什麼是前端自動化構建就不説了，應為我不是寫書的。在前端開發實踐中，大公司都會有自己的基礎前端架構，能容包括了開發環境、代碼管理，代碼質量，性能檢測，命令行工具，開發規範，開發流程，前端架構及性能優化。相對而言，小公司或則是創業型的公司，前端架構這塊做得就相對沒有這麼好，甚至於很不規範，而規範的目的在於提升工作效率。

[ 前端實習日記 ] 構建靜態頁面基礎架構

以前我們敲靜態頁面都是寫好html，css, js，然後再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。

後來，grunt,gulp等工具應運而生，當然它們不止這個功能，但卻很好地減輕了我們的負擔。這篇文章介紹一些如何使用這些工具使構建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業的還請參考百度FIS。

精益 React 學習指南 （Lean React）- 2.1 前端工程化概述

在前端開發的初始階段，開發者通常只用關 html, css, javascript。但是現代化的前端開發已經不僅僅是業務代碼本身，真正的前端開發環境涉及很多方面的需求，如：

• 開發需求

• 共享需求

• 性能需求

• 部署需求

這些東西我們都統一的叫做前端工程化，為了簡化前端工程化的配置，出現了很多優秀的工具

精益 React 學習指南 （Lean React）- 2.4 webpack + gulp 構建完整前端工作流

React 在大多數情況被當做當 SPA （單頁面應用）的框架，實際上在真實業務開發過程中，非單頁面應用的業務框架居多。所以我們在構建前端工程的時候，以多個頁面的方式維護。下面定義前端工程的目標：

• 基礎技術

• 應用模式

• 樣式結構

gulp

初探前端自動化神器 （Gulp）

Gulp 是一個構建系統，開發者可以使用它在網站開發過程中自動執行常見任務。Gulp 是基於 Node.js 構建的，因此 Gulp 源文件和你用來定義任務的 Gulp 文件都被寫進了JavaScript（或者CoffeeScript）裏。前端開發工程師還可以用自己熟悉的語言來編寫任務去 lint JavaScript 和 CSS、解析模板以及在文件變動時編譯LESS 文件（當然這些只是一小部分例子）。

gulp前端自動化工具的快速入門案例

最近項目和工作中要開始使用自動化工具了，回想一下以前接觸這個的時候就是什麼nodejs，grunt之類的了，這次乾脆就用一個新的，那麼就是gulp

gulp構建前端自動化

grunt是前端工程化的先驅
gulp更自然基於流的方式連接任務
Webpack最年輕，擅長用於依賴管理，配置稍較複雜
推薦使用Gulp，Gulp基於nodejs中stream，效率更好語法更自然,不需要編寫複雜的配置文件

webpack

[新姿勢]前端革命，革了再革：WebPack

五年間，NodeJS成為了服務端以及腳本工具的一代翹楚，NPM的成功讓大家意識到一個集中式的依賴／包管理體系的重要性，Bower應運而生，還有試圖將CMD和NPM包帶到前端領域，統一前後端包格式的Browserify等等，大量的前端工具爆發式地出現，WebPack是其中的(又)一款模塊打包工具。

[譯] Webpack 前端構建集成方案

構建工具逐漸成為前端工程必備的工具，Grunt、Gulp、Fis、Webpack等等，譯者有幸使用過Fis、Gulp。
前者是百度的集成化方案，提供了一整套前端構建方案，優點是基本幫你搞定了，但是靈活性相對比較低，社區也沒那麼大；後者提供了非常靈活的配置，簡單的語法可以配置出強大的功能，流控制也減少了編譯時的時間，可以和各種插件配合使用。
譯者因為要使用AMD模塊機制，開始接觸了webpack，發現官網上講的晦澀難懂，無法實踐，而國內雖有博客也講解一些入門的教程，但是要麼篇幅過短，要麼只講各種配置貼各種代碼，然後谷歌發現了國外大牛寫的這篇博客，發現講的非常通俗易懂，配合實踐和代碼，讓譯者感慨萬千，瞬間打開了一扇大門。

webpack學習（一）—— 入門

本文主要內容譯自webpack入門，以一些小的demo對webpack做了簡單介紹，每個步驟都很簡單明瞭，適合對webpack完全不瞭解的新手閲讀，以對webpack有個基本的瞭解。

webpack學習（二）—— 進階

本文將介紹如何使用webpack對具有較為規範的結構的項目進行構建。主要包括以下幾個方面：

• 進一步瞭解webpack.config.js

• 進一步瞭解webpack-dev-server

• 使webpack支持es6語法

webpack學習（三）—— webpack-dev-server

本文主要介紹以下兩方面的內容：

• webpack-dev-server自動刷新

• 熱加載（Hot Module Replacement）

webpack學習（四）— code splitting

首先説，code splitting指什麼。我們打包時通常會生成一個大的bundle.js(或者index,看你如何命名)文件，這樣所有的模塊都會打包到這個bundle.js文件中，最終生成的文件往往比較大。code splitting就是指將文件分割為塊(chunk)，webpack使我們可以定義一些分割點(split point)，根據這些分割點對文件進行分塊，並實現按需加載。

webpack 進階

詳解webpack-dev-server的使用

webpack-dev-server是一個小型的Node.js Express服務器，它使用webpack-dev-middleware來服務於webpack的包，除此自外，它還有一個通過Sock.js來連接到服務器的微型運行時。

webpack-dev-server使用方法，看完還不會的來找我~

webpack-dev-server主要是啓動了一個使用express的Http服務器。它的作用主要是用來伺服資源文件。此外這個Http服務器和client使用了websocket通訊協議，原始文件作出改動後，webpack-dev-server會實時的編譯，但是最後的編譯的文件並沒有輸出到目標文件夾。

重寫webpack多頁應用配置腳手架

歷經了多個web項目的實戰檢驗，我們對webapck在構建中逐步暴露出來的性能問題歸納主要有如下幾個方面：

• 代碼全量構建速度過慢，即使是很小的改動，也要等待長時間才能查看到更新與編譯後的結果（引入HMR熱更新後有明顯改進）；

• 隨着項目業務的複雜度增加，工程模塊的體積也會急劇增大，構建後的模塊通常要以M為單位計算；

• 多個項目之間共用基礎資源存在重複打包，基礎庫代碼複用率不高；

• node的單進程實現在耗cpu計算型loader中表現不佳；

針對以上的問題，我們來看看怎樣利用webpack現有的一些機制和第三方擴展插件來逐個擊破。

基於webpack+gulp搭建純靜態頁面型前端工程模板

基於webpack搭建純靜態頁面型前端工程解決方案模板。

5分鐘打造簡易高效的webpack配置

5分鐘從零搭建一個簡易高效的webpack開發環境。首先我們明確一下需求：

• 打包調試

• 提取公共代碼

• 壓縮

• 熱替換

webpack分包及異步加載套路

前行

工具武裝的前端開發工程師

《基於React的前端工程實戰》大綱，也是筆者心中的前端學習路線圖

本書最大的優勢在於形成了完整的知識體系結構，讓你合理歸納自己學到的知識，將知識放在它該在的地方。另外筆者想強調的是，無論React還是Vue或者Angular2都是非常優秀的前端框架，使用哪個框架還是屬於術的範疇。本書雖然立足於React，但是其中藴含的設計模式與工程架構可以通用於任何框架。筆者也着力於不希望受到某個具體框架的太多的束縛，畢竟在這個日新月異的前端世界，説不準哪天就落於人後了。

寫給想做前端的你

給大家的建議

• 道阻且長，冰凍三尺非一日之寒；

• 廣泛地學習，有條件和能力的同學儘早地接觸客户端開發，更多地瞭解服務端開發；

• 前端大有可為，新技術的發明者大多不是老東西，老東西經驗足但是歷史包袱重；

• 只在瀏覽器中思考必死無疑；

• 像一位同學提到的，打好基礎，offer就有。學校裏倒騰幾年真的很難搞出什麼大新聞，面試官也不會刻意為難你；

• 測試測試測試，前端測試值得學習掌握，比如e2e，這是一個機會：我能告訴你很多公司的前端測試都瞎JB點嗎？

• 學習一些函數式編程的思想，例如：lodash、Redux、RxJS；

• 拿到offer只是開始不要嘚瑟。