最近在知乎看到一个问题, 原问题如下:
"很奇怪, 为什么现在能找到自己手动创建 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 的方式进行服务端渲染
正式环境打包以及异步模块打包优化
来源: https://www.cnblogs.com/running-runtu/p/8769040.html