这一章节，我们主要针对从webpack，vue，weex的框架结构上来说明对比这三个框架的区别

主要功能：

webpack：

webpack是前端项目工程化的具体解决方案。

它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性、性能优化等强大的功能

好处就是把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的

这里的关键词就是基于，也就是说vue的本质，或者说vue的底层还是一个webpack项目

vue：

（官网贴图真是爽歪歪）

Vue是一套用于构建用户界面的前端框架。在这里里面有两个关键词，一个是构建用户界面，和框架，其实这两个关键词都非常的好理解。这里着重讲一下框架，这个框架引用的就是webpack里面的框架，但是vue的框架更加强大。如果你使用过webpack，你就会知道，在webpack里面创建一个项目他只会帮你生成一个包管理器文件，也就是package.json文件，其他的文件都需要你手动去写，去配置。但是vue就不一样了，在vue中，只需要一条命令就可以帮你生成一个基本的框架，完全不需要我们自己去写配置文件才能启动，当然后续如果我们需要其他的功能还是需要自己去写配置文件，但是对比webpack来说还是非常简单的。

weex：

简单来说，weex更像是一个vue的插件，一个可以通过web开发经验来开发移动端应用的插件。并且weex也非常配合vue框架，也就是说，当我需要通过vue来开发移动端应用的时候，就可以通过weex来创建一个带有特殊功能的vue框架，当然，实现这些功能的原因就是因为weex帮我们添加了很多的配置文件。

简单来说，webpack是一切的起点，vue的底层是webpack，而weex要依赖vue。

如果你有一个weex框架，删删改改你会得到一个vue框架，再删删改改你就得到了一个基本的webpack框架

框架区别：我们会分别展示三个框架的基础框架来对比它们之间的区别

webpack：

在webpack中，我们使用npm init -y的命令来创建一个webpack项目，但是他只会给我们一个包管理器文件，也就是package.json，其他的文件都是要自己写，包括src目录以及下面的东西，而且有些简化命令也需要自己去配置才能使用。好在当我们install一个第三方库的时候，它会自动的帮我们创建一个node_modules来存放我们的库文件。并且webpack的配置文件，webpack.config.js文件也是需要我们手动创建的，虽然里面的内容都是固定的，当我们打包之后，会出现dist文件夹来存放我们打包好的js文件，然后再index.html文件中引入我们打包好的文件就可以实现效果了

webpack的包管理器文件内容简介：

vue：

我们刚刚创建出来的vue框架就已经非常的完善并且可以运行一个标准示例，并且能看到一些webpack的影子，比如package.json文件，node_modules包存放文件夹，以及src目录，以及vue.comfig.js这个vue的配置文件，我们之前已经了解过Vue的基础框架组成了，所以这里就不不多做赘述

weex：

weex的框架就多了很多的东西，比如一些有关移动端的ios和android配置文件，这里他用的是webpack原生的配置文件，也就是webpack.config,.json文件，但是其实是一样的，毕竟vue框架的本质就是一个引入了vue库的webpack文件，所以这里使用vue依赖的weex的配置文件也是可以写webpack原始配置文件的。