不会手写vue-cli脚手架，leader竟要辞退我！

遥想当年，土哥入行之初，因为不会从零手写一个适合公司项目vue-cli脚手架，差点被leader劝退。

还记得那个时候，我还是个工作没几年的前端新人，在公司搭建vue项目也是从一个npm install vue-cli -g的命令行开始的。

傻瓜式操作，几条命令轻松搞定。

我觉得，官方提供的vue-cli脚手架很友好，不用想vue+webpack的工作流怎么搭建，vue-loader 和 css-module怎么配置，如何安装使用eslint和editorconfig等，就可以直接进入业务代码的开发阶段。

当时，我还是一个写业务代码的前端一线搬砖工。

直到有一次，公司有新项目，leader让我自己去搭建一个前端项目的工程，我一下傻眼了。

我承认，自己当时在前端工程化这方面功底比较差，之前这些在项目破土动工前的活儿，都是由leader亲自操刀的。

前端太难了！我该怎么办？

还好，求生欲很强的我，厚着脸皮去请教了leader，事后还请leader吃了火锅喝了酒。

经此事后，我开始不满足于一直写业务代码，我也想知道一个一个项目在破土动工前，前端leader是怎么搭建一个前端项目的工作流的，如何去手动配置一个具体项目的webpack打包文件，包括后期的SSR，服务端渲染。

那段「刨坑问底低头钻研」的日子，都成了我后来进阶为leader的资本。

很多人一直嚷嚷着前端进阶，我要摘掉初级前端的帽子，我要当leader... 殊不知，静静地摆在你编辑器里面的项目代码，都是你提升自己内功的砝码，也是初级前端和中级前端的区别所在。

来个灵魂拷问：你现在能给你们前端小组成员，从头到尾讲述清楚整个项目的来龙去脉，所用技术栈有哪些，以及各个工程目录的关联关系吗？

初级前端只会在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脚手架，是我前端路上的转折点。

之后，土哥触类旁通，稳扎稳打，凭借着颜值和人品，拿下了leader这个角色，这可是 dream job 啊！！！

文章写到这，有人会问，“土哥你能带带我吗，我至今还不会从零手写一个脚手架。。。”

没问题，既然你问我了，我就要满足你的求知欲。