哎呀，你当webpack是二货的呀，webpack会自动帮你处理好的，会把在*.vue里的import Lib from 'assets/Lib.js'的库自动提取出来，放到一个全局的JS文件里，这就是自动构造的神奇呀，省心省电，妈妈再也不用担心我做重复的工作了。
在Lib.js里，我们也看到有两个导入的JS文件，主要来做什么的呢？
为了更好的在全局调用模块里，知道哪个模块的作用是什么，另外在写代码时更能快速查找到JS文件，我区分了配置文件和共用事件文件，即conf、common，下面说下具体的用途。
# 储存站点的配置，例如web的名称、LOGO地址等 import C from 'assets/conf'; # 导入全局的共用事件，例如在微信的JS SDK初始化，每个页面都要分享，都需要初始化的，一次调用，全局使用，棒！！ import M from 'assets/common';
当然，你也可以不像这样区分不同的JS文件，删除也没有影响的，具体也要看项目的需要而定，不能死读书。
另外，如果想要干净的页面模块模板，可以到根目录的tpl里复制module_tpl整个文件夹，然后粘贴到src/module目录下马上就可以进行开发了，开发之前记得在cmd里npm run dev跑一遍，新增页面都要重新dev一遍。
module我们就讲到这里，下面我们来讲讲组件的调用，最爱组件了。
组件的使用
组件（Component）是 vue.js 最强大的功能之一，当你发现使用组件可以减少造轮子里，你会深深的爱上它。
我们的组件都是放在components目录下的，调用组件的方法也很简单。
import Button from 'components/Button';
然后记得在*.vue注册导入的组件，要不然会影响使用。
import Button from 'components/Button'; export default { data() { return { } }, components: { # 在这里注册组件，不注册组件的话，是无法使用的。 Button } }
如果想要干净的组件模板，可以到根目录的tpl里找到components_tpl的Hello.vue文件，复制粘贴到components目录下马上就可以进行开发了。
图标字体
在yaoyao1987童鞋里，是没有打包构造图标字体的代码逻辑，这也是我优化上去的一部分，建议使用iconfont图标（） ，强大到无所不能，可以到iconfont下载自己想要的图标字体，记得是把文件放到\src\assets\font文件夹里。
webpack会自动打包的，无需理会，另外还有一点，iconfont提供的css文件，复制到\src\assets\css.css文件即可，要不然没有效果哈。
在*.vue里使用调用就行了。
<i>!</i>
构建代码说明
那我们使用的是vue-cli的手脚架，用过vue+cli的朋友知道主要构建代码都放在根目录build下，vue多页面主要修改了这三个JS文件webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js
# 【webpack.base.conf.js】主要是构建的全局设置，主要是增加了以下代码，已经增加在JS文件里，这里只是做一个补充说明，具体请看`build/webpack.base.conf.js`。 var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件 var chunks = Object.keys(entries); plugins: [ // 提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', // 公共模块的名称 chunks: chunks, // chunks是需要提取的模块 minChunks: chunks.length }), // 配置提取出的样式文件 new ExtractTextPlugin('css/[name].css') ] function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('https://www.jb51.net/').splice(-3); pathname = tmp.splice(0, 1) + 'https://www.jb51.net/' + basename; // 正确输出js和html的路径 entries[pathname] = entry; }); return entries; }
这里还要做一个特别说明，我们每次更新资源文件，为了去缓存，都会给文件生成hash值，例如：
<script type='text/javascript' src='https://www.jb51.net/vendors.61714a310523a3df9869.js' charset='utf-8'></script> <script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'></script>
这两者都是为了去缓存，唯一的区别的生成的文件名不一样，有些项目，为了可以能出严重BUG时第一时间回滚，以文件名+hash的方式储存，每次生成都不会覆盖之前的代码，以方便查BUG或者回滚。
另一种方式，就是以文件名+?hash的方式储存，每次都会覆盖之前生成的资源，方便在某些特殊项目使用。
我在webpack.base.conf.js也已经注释说明了。