脚本宝典收集整理的这篇文章主要介绍了四. Vue CLI详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

四. Vue CLI详解

1. webpack

1> 什么是webpack

模块 和 打包

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。

并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。 而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。 这就是webpack中模块化的概念。

打包： 理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。

就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。

并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

2> webpack和gulp对比

但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢？

grunt/gulp的核心是Task 我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css） 之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。 所以grunt/gulp也被称为前端自动化任务管理工具。

只需要进行简单的合并、压缩，就使用grunt/gulp即可。 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。 所以，grunt/gulp和webpack有什么不同呢？ grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。 webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

3> 手动webpack的配置

webpack安装

webpack模块化打包，webpack为了能够正常的运行，必须依赖node环境

node环境为了可以正常的执行很多代码 ，必须其中包含各种依赖的包

如果我们手动去管理这些依赖的包会非常的复杂，所以node这个工具给我们提供了npm（node package manager） 工具

查看自己的node版本：

node - v

全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)

npm install webpack@3.6.0 -g

安装完之后可以查看webpack的版本

webpack -version

dict --> distribution （发布）

脚本宝典总结

以上是脚本宝典为你收集整理的四. Vue CLI详解全部内容，希望文章能够帮你解决四. Vue CLI详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。