webpack2打包vue与Boostrap并进行多页面打包以及公共js部分的提取

webpack介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

从这个介绍中可以看出webpack提供的是一种模块化管理工具，工具是死的用的人是活的，所以怎么用webpack还是要看每个人的想法，通过对前端技术的开发的经验来看我们在前端编码过程中遇到的比较多的模块就是css、js、html、img以及这些文件组合所产生的插件比如

1. jQuery、echart、d3.js等就是一个纯js插件只需要引入js文件就可以调用API实现相关功能

2. animate.css，Normalize.css就是一个纯css的模块

3. bootstrap则是三个模块的组合字体图标文件，css文件以及js文件

通过对这些使用比较广泛的插件的使用和研究我们在设计自己的公共模块时也可以借鉴下，在平时的前端页面开发过程中我们能总结出前端代码分为两部分，一部分是调用的第三方插件（js，css，图片等），这部分代码我们是不需要去做改动的，一部分就是自己写的代码，这部分的代码就是我们的自由发挥空间；因此我们在使用webpack进行项目搭建时需要对这两部分的资源进行组织和规范，

对于第三方插件部分配置好路径，在引入模块的时候注意下（后面会详细介绍）
对于自己写的这部分代码进行模块化组织时需要考虑到js，css，html的公共模块复用

webpack2配置文件

接下来我们开始webpack2的webpack.config.js配置文件的介绍（只介绍几个常用的属性更多的介绍请查看webpack配置文件）

module.exports = {
    devtool: 'source-map',
    // entry数据类型(string|object|array)
    entry:{
        common:['jQuery','bootstrap','vue'],
        app:path.resolve(__dirname, '../src/views/index/index.js'),
        test:path.resolve(__dirname, '../src/views/test/index.js')
    } , 
    output: { //打包路径
        publicPath: "/assets/", //配合devServer本地Server
        filename: 'js/[name].bundle.js?v=[hash]', //出口文件名
        path: path.resolve(__dirname,