前端工程化到底是什么？
工程及工程化
一個(gè)工程其實(shí)就是一個(gè)項(xiàng)目，比如一個(gè)網(wǎng)站或者一個(gè) APP。普通的程序員，大部分情況下，都是處于其中的一個(gè)環(huán)節(jié)。要學(xué)習(xí)工程化，就需要先了解工程化的整個(gè)生命周期。
圖示中已經(jīng)是我簡(jiǎn)化過的內(nèi)容了，實(shí)際的過程更加復(fù)雜，其中會(huì)牽扯到非常多的人力物力財(cái)力以及要花費(fèi)相當(dāng)大的管理成本。一個(gè)工程從立項(xiàng)到交付上線的整個(gè)過程中，一定會(huì)使用到各種工具。
那么工程化，其實(shí)就是完成項(xiàng)目過程中，用到的各種工具和技術(shù)。當(dāng)然，這只是從簡(jiǎn)單的落地應(yīng)用的角度來說的，工程化是非常復(fù)雜的。
回到前端編程的范疇中，你會(huì)發(fā)現(xiàn)，整個(gè)項(xiàng)目的后半部分才是我們需要關(guān)注的。而這一部分，也就是我們所說的前端工程化的內(nèi)容了。
前端工程化
什么是前端工程化？前端工程化就是通過各種工具和技術(shù)，提升前端開發(fā)效率的過程。
這句話有兩個(gè)含義：
1：前端工程化的內(nèi)容：各種工具和技術(shù)。
2：前端工程化的作用：通過使用工具，提升開發(fā)效率。
開發(fā)中到底有哪些問題呢？
1：項(xiàng)目上線前，代碼需要壓縮。
2：想要使用 ES6+ 或 CSS3 新特性，要解決兼容性問題。
https://caniuse.com/
3：想要使用 Less 增強(qiáng) CSS 的編程性，但是瀏覽器不能直接支持 Less。
4：多人協(xié)作開發(fā)，代碼風(fēng)格無法統(tǒng)一。
總結(jié)一下：
前端工程化解決的問題非常多，簡(jiǎn)而言之就是項(xiàng)目上線前的壓縮代碼，對(duì) ES6+ 或 CSS3 新特性進(jìn)行轉(zhuǎn)換，對(duì) Less 等 CSS 的預(yù)編譯語(yǔ)言進(jìn)行編譯處理以及對(duì)不同代碼風(fēng)格的格式化等等，那相對(duì)應(yīng)地也就出現(xiàn)了各種各樣的工具，簡(jiǎn)單給工具分一下類別：
每個(gè)類別下，都有很多不同的處理工具，我使用一個(gè)表格做了不完全的統(tǒng)計(jì)：
但是一定要強(qiáng)調(diào)一下，現(xiàn)階段工程化工具都異常強(qiáng)大，導(dǎo)致很多人對(duì)工程化存在誤解，認(rèn)為某個(gè)工具就是工程化了，比如webpack，這種思想要不得。
最后，前端工程化之所以成功和繁榮，有一個(gè)關(guān)鍵性角色，不容忽視，那就是 Node.js，可以這么說，前端工程化就是在 Node 的基礎(chǔ)上發(fā)展的；
所以，作為前端程序員，Node 其實(shí)不是一個(gè)框架，更不是單純寫后臺(tái)服務(wù)器的語(yǔ)言，不會(huì) Node 的前端，一定不是好碼農(nóng)。
推薦閱讀：
如何使用 Webpack 實(shí)現(xiàn)模塊化打包？
恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。
點(diǎn)個(gè)“在看”和“贊”吧！