webpack+vue多入口环境搭建

项目地址:https://pan.baidu.com/s/1c1Dflp2

使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发

研究webpack+vue研究了一个多星期了,走了很多坑,现在在下面写一下那些年的那些坑。

项目文件夹解释:compaent文件夹是通用的vue组件存放的地方,image文件夹是图片存放地址,professional文件夹是业务文件存放地址　　

搭建前必看:我们搭建前在网上找了很多的资料,觉得这篇是不错的对搭建WV环境有好处的:http://www.cnblogs.com/linfangshuhellowored/p/5657285.html

坑1：webpack+vue（以下简称WV）的项目结构

　　在使用WV框架之前,我使用的项目结构是普通的那种就是所有的css在一个文件夹 所有的js在一个文件夹 所有的图片在一个文件夹 所有的html在一个文件夹,在WV框架下我的结构是业务主导型 简单来说就是整个项目有一个base.css， 然后vue.js作为base.js，然后其他所有的页面通用型的vue组件合并文一个js文件叫做compaent,这三个文件是每一个html必须引用的 他们直接放在文件的根目录下,然后业务js,业务css,业务html放在同一个文件夹里面。

坑2：多入口

　　好像网上好多例子都是但入口,后来找到一些是实现多入口的,但是我们的html文件是几十个总不能一个一个写吧,所以找了一个方法,这个getEntry里面通过nodejs的path模块和glob模块匹配目录下所有的指定文件,这样就省事多了（如果听不懂我在说什么 这个说的比较好:http://www.cnblogs.com/legu/p/5741116.html）

坑3：css分离

　　使用es6的写法后,我们页面的css一般都是这种姿势引人用的 var detailsCSS = require('../app/details.css') ,这个时候如果直接打包的话 会把details.css直接打包到页面里,如果有用学想分离的话,可以使用extract-text-webpack-plugin插件,使用方式参考我的代码啊,

坑4：提取公共js

　　我们用vue和vue组件 肯定要在页面js里面引入这些js吧 如：import Vue from 'vue'，import detailbtn from './components/detailbtn'， 如果我们什么都不做直接就打包最后的结果就是每个业务js里面都会包含vue.js的源码 和vue组件的源码,这应该不是我们要的效果吧，我们要的是vue分离出来,vue组件分离出来，我们使用CommonsChunkPlugin插件：他的使用我可以参开这个：http://blog.csdn.net/github_26672553/article/details/52280655

坑5：版本号控制

　　清除缓存肯定要用版本号啊,我们分离了css肯定要在页面单独用link方式引入啊,分离了js肯定要script方式单独引入啊，可以使用这个插件:html-webpack-plugin 他的用法是生成html文件,主要是他可以参照模板来生成,而且还支持添加script方式引入js,想想一下：如果我们获取到我们所有的目录html 然后用这个插件对我们所有的html统一处理一下,批量引入分离的js文件 在引入的时候支持hash控制,参考:http://www.cnblogs.com/wonyun/p/6030090.html

坑6：图片资源打包

　　图片资源打包其实很简单,只是本身的打包不支持html里面引入的图片 ,这个时候我们用html-withimg-loader插件啊,（全局搜索我的webconfig文件 搜html-withimg-loader）需要安装url-loader插件和html-withimg-loader插件

大家有什么问题,写在评论里,我会回答的