最近在知乎看到一個(gè)問(wèn)題每瞒，原問(wèn)題如下：

“很奇怪拴疤，為什么現(xiàn)在能找到自己手動(dòng)創(chuàng)建vue腳手架的文章非常少，而且大家似乎對(duì)webpack4的熱情并不高独泞，對(duì)于想基于vue2.0+webpack4搭建一個(gè)腳手架的我來(lái)說(shuō)資料真是少得可憐呐矾。難道現(xiàn)在一般的做法就是直接從vue-cli開始然后改成自己需要的模樣嗎？難道就沒有人從零開始搭建一個(gè)漸進(jìn)增強(qiáng)的腳手架懦砂？這一點(diǎn)我很疑惑蜒犯，希望大牛給點(diǎn)指導(dǎo)≤癖欤”

這個(gè)問(wèn)題我之前在公司也曾想過(guò)罚随，當(dāng)初入門vue項(xiàng)目也是從一個(gè)?npm install vue-cli -g?的命令行開始的，覺得官方提供的vue-cli腳手架很友好羽资，不用想vue+webpack的工作流怎么搭建淘菩，vue-loader 和 css-module怎么配置，如何安裝使用eslint和editorconfig等屠升，就可以直接進(jìn)入業(yè)務(wù)代碼的開發(fā)階段潮改。

當(dāng)然，以上是對(duì)于寫業(yè)務(wù)代碼的前端一線編碼人員來(lái)說(shuō)的腹暖，對(duì)于追求上進(jìn)的你當(dāng)然不滿足于一直寫業(yè)務(wù)代碼汇在，你也想知道一個(gè)項(xiàng)目在破土動(dòng)工前，前端leader是怎么搭建一個(gè)前端項(xiàng)目的工作流的脏答，如何去手動(dòng)配置一個(gè)具體項(xiàng)目的webpack打包文件糕殉，包括后期的SSR，服務(wù)端渲染殖告。

這些都是你提升自己內(nèi)功的砝碼阿蝶，也是初級(jí)前端和中級(jí)前端的區(qū)別所在，初級(jí)前端只會(huì)在leader安排下的一個(gè)模塊里寫點(diǎn)業(yè)務(wù)代碼而不用去管前端工程的問(wèn)題黄绩，這些問(wèn)題都被前端leader搞定了羡洁，你只需調(diào)用他寫好的命令或者插件即可。

中級(jí)前端或者更進(jìn)階者就有統(tǒng)籌全局的能力宝与，類似于文章開頭說(shuō)的焚廊，能手動(dòng)創(chuàng)建一個(gè)和公司項(xiàng)目需求深度定制的vue腳手架冶匹，而不再依賴于官方提供的vue-cli，一方面自己定制的腳手架哪出了問(wèn)題自己心里清楚咆瘟，從而也能培養(yǎng)自己前端架構(gòu)的能力嚼隘，另一方面這也是月薪10K與20K的技術(shù)差距。

當(dāng)然袒餐，如果你直接使用了vue-cli飞蛹，你的領(lǐng)導(dǎo)要求你將webpack的版本從3升級(jí)到最新的大版本4，你會(huì)不會(huì)一臉懵逼呢灸眼？舉個(gè)例子： 在webpack4.0中卧檐，如何使用extract-text-webpack-plugin配置css單獨(dú)分離打包，以及如何解決在升級(jí)過(guò)程中碰到的一些坑焰宣？如果你沒有親手升級(jí)過(guò)webpack4霉囚，你根本不會(huì)發(fā)現(xiàn)這些問(wèn)題，例如extract-text-webpack-plugin的報(bào)錯(cuò)：

這個(gè)問(wèn)題的解決方式你在百度上暫時(shí)還搜不到答案匕积，只能是依靠平時(shí)閱讀官方文檔盈罐、技術(shù)社區(qū)等尋找解決之道。 后來(lái)經(jīng)過(guò)排查你會(huì)發(fā)現(xiàn)是由于extract-text-webpack-plugin目前還沒有webpack4版本闪唆≈逊啵可以使用該方式npm install extract-text-webpack-plugin@next解決。

這就是硬實(shí)力的一種體現(xiàn)悄蕾，在公司里技術(shù)的高低票顾，體現(xiàn)于公司項(xiàng)目中碰到的難以解決的bug的解決能力。你可以看看平時(shí)在公司里誰(shuí)解決的bug多帆调，一般不是太難的bug都是前端小組的成員去解決奠骄，比較難的bug大多數(shù)情況下是前端小組的leader去解決的。

這種硬實(shí)力的體現(xiàn)贷帮，折射出他為何是leader戚揭，你為何是被管理者，同樣的崗位撵枢，放你上去，你不一定能解決掉項(xiàng)目中碰到的問(wèn)題精居，而他能锄禽。所以，童鞋們靴姿，人家之所以是leader沃但，是因?yàn)槿思矣懈吣阋换I的技能，而這恰恰是你現(xiàn)階段所缺少的佛吓。

俗話說(shuō)宵晚，不想當(dāng)leader的程序猿不是好碼農(nóng)垂攘。所以，平時(shí)你們可以在公司里看看你們的leader在忙些什么淤刃。

這就是我為什么不推薦你使用vue-cli創(chuàng)建腳手架的原因（此文的受眾是想要進(jìn)階中級(jí)的初級(jí)前端人員）晒他。

接下來(lái)料仗，我會(huì)分章節(jié)手把手教大家如何從零開始一個(gè)vue+webpack前端工程工作流的搭建蔓同，以及SSR服務(wù)端渲染晕鹊。文章預(yù)告如下：

> 一個(gè)正式項(xiàng)目的目錄結(jié)構(gòu)是怎么形成的

> vue-loader是如何配置的

>?淺談css-module配置

>?安裝使用eslint檢查的小技巧

>?如何在前端項(xiàng)目中配置editorconfig以及precommit

>?怎么用createRenderer的方式進(jìn)行服務(wù)端渲染

>?正式環(huán)境打包以及異步模塊打包優(yōu)化

以上內(nèi)容均會(huì)第一時(shí)間發(fā)布在我的公眾號(hào)：閏土大叔?瓷叫，歡迎關(guān)注疆导。