爲何我不推薦你使用vue-cli建立腳手架？

最近在知乎看到一個問題，原問題以下：

「 很奇怪，爲何如今能找到本身手動建立vue腳手架的文章很是少，並且你們彷佛對webpack4的熱情並不高，對於想基於vue2.0+webpack4搭建一個腳手架的我來講資料真是少得可憐。難道如今通常的作法就是直接從vue-cli開始而後改爲本身須要的模樣嗎？難道就沒有人從零開始搭建一個漸進加強的腳手架？這一點我很疑惑，但願大牛給點指導。」

這個問題我以前在公司也曾想過，當初入門vue項目也是從一個 npm install vue-cli -g 的命令行開始的，以爲官方提供的vue-cli腳手架很友好，不用想vue+webpack的工做流怎麼搭建，vue-loader 和 css-module怎麼配置，如何安裝使用eslint和editorconfig等，就能夠直接進入業務代碼的開發階段。

固然，以上是對於寫業務代碼的前端一線編碼人員來講的，對於追求上進的你固然不知足於一直寫業務代碼，你也想知道一個項目在破土動工前，前端leader是怎麼搭建一個前端項目的工做流的，如何去手動配置一個具體項目的webpack打包文件，包括後期的SSR，服務端渲染。

這些都是你提高本身內功的砝碼，也是初級前端和中級前端的區別所在，初級前端只會在leader安排下的一個模塊裏寫點業務代碼而不用去管前端工程的問題，這些問題都被前端leader搞定了，你只需調用他寫好的命令或者插件便可。

中級前端或者更進階者就有統籌全局的能力，相似於文章開頭說的，能手動建立一個和公司項目需求深度定製的vue腳手架，而再也不依賴於官方提供的vue-cli，一方面本身定製的腳手架哪出了問題本身內心清楚，從而也能培養本身前端架構的能力，另外一方面這也是月薪10K與20K的技術差距。

固然，若是你直接使用了vue-cli，你的領導要求你將webpack的版本從3升級到最新的大版本4，你會不會一臉懵逼呢？舉個例子：
在webpack4.0中，如何使用extract-text-webpack-plugin配置css單獨分離打包，以及如何解決在升級過程當中碰到的一些坑？若是你沒有親手升級過webpack4，你根本不會發現這些問題，例如extract-text-webpack-plugin的報錯：

(node:12712) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    E:\***\myproject\webpack-vue-elementUi\node_modules\webpack\lib\Chunk.js:460
                    throw new Error(
                    ^
    
    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
        at Chunk.get (E:\***\myproject\webpack-vue-elementUi\node_modules\webpack\lib\Chunk.js:460:9)
        at E:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
        at Array.forEach (<anonymous>)
        at E:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:171:18

這個問題的解決方式你在百度上暫時還搜不到答案，只能是依靠平時閱讀官方文檔、技術社區等尋找解決之道。
後來通過排查你會發現是因爲extract-text-webpack-plugin目前尚未webpack4版本。可使用該方式npm install extract-text-webpack-plugin@next解決。

這就是硬實力的一種體現，在公司裏技術的高低，體現於公司項目中碰到的難以解決的bug的解決能力。你能夠看看平時在公司裏誰解決的bug多，通常不是太難的bug都是前端小組的成員去解決，比較難的bug大多數狀況下是前端小組的leader去解決的。

這種硬實力的體現，折射出他爲什麼是leader，你爲什麼是被管理者，一樣的崗位，放你上去，你不必定能解決掉項目中碰到的問題，而他能。因此，童鞋們，人家之因此是leader，是由於人家有高你一籌的技能，而這偏偏是你現階段所缺乏的。

俗話說，不想當leader的程序猿不是好碼農。因此，平時大家能夠在公司裏看看大家的leader在忙些什麼。

這就是我爲何不推薦你使用vue-cli建立腳手架的緣由（此文的受衆是想要進階中級的初級前端人員）。

接下來，我會分章節手把手教你們如何從零開始一個vue+webpack前端工程工做流的搭建，以及SSR服務端渲染。文章預告以下：

• 一個正式項目的目錄結構是怎麼造成的
• vue-loader是如何配置的
• 淺談css-module配置
• 安裝使用eslint檢查的小技巧
• 如何在前端項目中配置editorconfig以及precommit
• ......
• 怎麼用createRenderer的方式進行服務端渲染
• 正式環境打包以及異步模塊打包優化

以上內容均會第一時間發佈在個人公衆號：閏土大叔 ，歡迎關注。