分析vue-cli@2.9.3 搭建的webpack项目工程

原创 轩辕Rowboat 教程 前端 295阅读 2018-06-12 20:33:51 举报

前言

已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

项目放在笔者的github上,分析vue-cli@2.9.3 搭建的webpack项目工程。方便大家克隆下载,或者在线查看。同时也求个star ^_^,也是对笔者的一种鼓励和支持。

正文从这里开始~

使用vue-cli初始化webpack工程

更多vue-cli如何工作的可以查看这篇文章vue-cli是如何工作的,或者分析Vue-cli源码查看这篇走进Vue-cli源码,自己动手搭建前端脚手架工具,再或者直接查看vue-cli github仓库源码

如果对webpack还不是很了解,可以查看webpack官方文档中的概念,虽然是最新版本的,但概念都是差不多的。

package.json

分析一个项目,一般从package.json的命令入口scripts开始。

Npm Script 底层实现原理是通过调用 Shell 去运行脚本命令。npm run start等同于运行npm run dev

Npm Script 还有一个重要的功能是能运行安装到项目目录里的 node_modules 里的可执行模块。

例如在通过命令npm i -D webpack-dev-serverwebpack-dev-server安装到项目后,是无法直接在项目根目录下通过命令 webpack-dev-server 去执行 webpack-dev-server 构建的,而是要通过命令 ./node_modules/.bin/webpack-dev-server 去执行。

Npm Script 能方便的解决这个问题,只需要在 scripts 字段里定义一个任务,例如:

Npm Script 会先去项目目录下的 node_modules 中寻找有没有可执行的 webpack-dev-server 文件,如果有就使用本地的,如果没有就使用全局的。 所以现在执行 webpack-dev-server 启动服务时只需要通过执行 npm run dev 去实现。

再来看下 npm run dev
webpack-dev-server 其实是一个node.js的应用程序,它是通过JavaScript开发的。在命令行执行npm run dev命令等同于执行node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js。你可以试试。

更多package.json的配置项,可以查看阮一峰老师的文章 package.json文件

npm run dev指定了build/webpack.dev.conf.js配置去启动服务,那么我们来看下这个文件做了什么。

build/webpack.dev.conf.js webpack开发环境配置

这个文件主要做了以下几件事情:<br>
1、引入各种依赖,同时也引入了config文件夹下的变量和配置,和一个工具函数build/utils.js,<br>
2、合并build/webpack.base.conf.js配置文件,<br>
3、配置开发环境一些devServerplugin等配置,<br>
4、最后导出了一个Promise,根据配置的端口,寻找可用的端口来启动服务。

具体可以看build/webpack.dev.conf.js这个文件注释:

build/utils.js 工具函数

上文build/webpack.dev.conf.js提到引入了build/utils.js工具函数。<br>
该文件主要写了以下几个工具函数:<br>
1、assetsPath返回输出路径,<br>
2、cssLoaders返回相应的css-loader配置,<br>
3、styleLoaders返回相应的处理样式的配置,<br>
4、createNotifierCallback创建启动服务时出错时提示信息回调。

具体配置可以看该文件注释:

build/webpack.base.conf.js webpack基本配置文件

上文build/webpack.dev.conf.js提到引入了build/webpack.base.conf.js这个webpack基本配置文件。<br>
这个文件主要做了以下几件事情:<br>
1、引入各种插件、配置等,其中引入了build/vue-loader.conf.js相关配置,<br>
2、创建eslint规则配置,默认启用,<br>
3、导出webpack配置对象,其中包含context,入口entry,输出outputresolvemodule下的rules(处理对应文件的规则),和node相关的配置等。

具体可以看这个文件注释:

build/vue-loader.conf.js vue-loader配置文件

上文build/webpack.dev.conf.js提到引入了build/vue-loader.conf.js

这个文件主要导出了一份Vue-loader的配置,
主要有:loaderscssSourceMapcacheBustingtransformToRequire

具体看该文件注释:

看完了这些文件相应配置,开发环境的相关配置就串起来了。其中config/文件夹下的配置,笔者都已经注释在build/文件夹下的对应的文件中,所以就不单独说明了。

那回过头来看,package.jsonscripts中的npm run build配置,node build/build.js,其实就是用node去执行build/build.js文件。

build/build.js npm run build 指定执行的文件

这个文件主要做了以下几件事情:<br>
1、引入build/check-versions文件,检查nodenpm的版本,<br>
2、引入相关插件和配置,其中引入了webpack生产环境的配置build/webpack.prod.conf.js,<br>
3、先控制台输出loading,删除dist目录下的文件,开始构建,构建失败和构建成功都给出相应的提示信息。

具体可以查看相应的注释:

build/check-versions 检查nodenpm版本

上文提到build/check-versions 检查nodenpm版本,这个文件主要引入了一些插件和配置,最后导出一个函数,版本不符合预期就输出警告。

具体查看这个配置文件注释:

build/webpack.prod.conf.js webpack生产环境配置

上文build/build.js提到,引入了这个配置文件。<br>
这个文件主要做了以下几件事情:<br>
1、引入一些插件和配置,其中引入了build/webpack.base.conf.js webpack基本配置文件,<br>
2、用DefinePlugin定义环境,<br>
3、合并基本配置,定义自己的配置webpackConfig,配置了一些modules下的rulesdevtools配置,output输出配置,一些处理js、提取css、压缩css、输出html插件、提取公共代码等的
plugins,<br>
4、如果启用gzip,再使用相应的插件处理,<br>
5、如果启用了分析打包后的插件,则用webpack-bundle-analyzer,<br>
6、最后导出这份配置。

具体可以查看这个文件配置注释:

至此,我们就分析完了package.json中的npm run devnpm run build两个命令。测试相关的类似就略过吧。

npm run lint.eslintrc.js中的配置不多,更多可以查看eslint英文文档eslint中文官网,所以也略过吧。不过提一下,把eslint整合到git工作流。可以安装huskynpm i husky -S。安装后,配置package.jsonscripts中,配置precommit,具体如下:

配置好后,每次git commit -m提交会检查代码是否通过eslint校验,如果没有校验通过则提交失败。还可以配置prepushhusky不断在更新,现在可能与原先的配置不太相同了,具体查看husky github仓库。原理就是git-hooks,pre-commit的钩子。对shell脚本熟悉的同学也可以自己写一份pre-commit。复制到项目的.git/hooks/pre-commit中。不需要依赖husky包。我司就是用的shell脚本。

最后提一下.babelrc文件中的配置。

.babelrc babel相关配置

配置了一些转码规则。这里附上两个链接:babel英文官网babel的中文官网

具体看文件中的配置注释:

文件中presets中有配置envstage-2,可能不知道是什么。这里引用深入浅出webpack书中,第三章,3-1使用ES6语言 小节的一段,解释一下。<br>

presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性,一个 Presets 对一组新语法特性提供支持,多个 Presets 可以叠加。 Presets 其实是一组 Plugins 的集合,每一个 Plugin 完成一个新语法的转换工作。Presets 是按照 ECMAScript 草案来组织的,通常可以分为以下三大类(书中就是说三大类,我发现就两点~~~):<br>
1、已经被写入 ECMAScript 标准里的特性,由于之前每年都有新特性被加入到标准里,所以又可细分为:<br>
es2015 包含在2015里加入的新特性;<br>
es2016 包含在2016里加入的新特性;<br>
es2017 包含在2017里加入的新特性;<br>
es2017 包含在2017里加入的新特性;<br>
env 包含当前所有 ECMAScript 标准里的最新特性。<br>
2、被社区提出来的但还未被写入 ECMAScript 标准里特性,这其中又分为以下四种:<br>
stage0 只是一个美好激进的想法,有 Babel 插件实现了对这些特性的支持,但是不确定是否会被定为标准;<br>
stage1 值得被纳入标准的特性;<br>
stage2 该特性规范已经被起草,将会被纳入标准里;<br>
stage3 该特性规范已经定稿,各大浏览器厂商和 ` 社区开始着手实现;<br> stage4` 在接下来的一年将会加入到标准里去。<br>

至此,就算相对完整的分析完了Vue-cli(版本v2.9.3)搭建的webpack项目工程。希望对大家有所帮助。<br>
项目放在笔者的github上,分析vue-cli@2.9.3 搭建的webpack项目工程。方便大家克隆下载,或者在线查看。同时也求个star ^_^,也是对笔者的一种鼓励和支持。<br>
笔者知识能力有限,文章有什么不妥之处,欢迎指出~

关于

作者:常以轩辕Rowboat为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
个人博客
segmentfault个人主页
掘金个人主页
知乎
github

小结

1、分析这些,逐行注释,还是需要一些时间的。其中有些不是很明白的地方,及时查阅相应的官方文档和插件文档(建议看英文文档和最新的文档),不过文档没写明白的地方,可以多搜索一些别人的博客文章,相对比较清晰明了。
2、前端发展太快,这个Vue-cli@2.9.3 webpack版本还是v3.xwebpack现在官方版本已经是v4.12.0,相信不久后,Vue-cli也将发布支持webpack v4.x的版本,v3.0.0已经是beta.16了。
3、后续有余力,可能会继续分析新版的vue-cli构建的webpack项目工程。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复