什么是webpack
webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块
webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的以来关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：
它在很多地方都能替代Grunt和Gulp，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。所以在我接触了webpack之后，就不太想用gulp了
为什么使用webpack
总结如下：
对 CommonJS 、AMD 、ES6的语法做了兼容；
对js、css、图片等资源文件都支持打包；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
有独立的配置文件webpack.config.js；
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
支持 SourceUrls 和 SourceMaps，易于调试；
具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快；
webpack主要是用于vue和React较多，其实它就非常像Browserify，但是将应用打包为多个文件。如果单页面应用有多个页面，那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码。
基于本人项目使用
vue webpack的配置文件的基本目录结构如下：
config
├── dev.env.js //dev环境变量配置
├── index.js // dev和prod环境的一些基本配置
└── prod.env.js // prod环境变量配置
build
├── build.js // npm run build所执行的脚本
├── check-versions.js // 检查npm和node的版本
├── logo.png
├── utils.js // 一些工具方法，主要用于生成cssLoader和styleLoader配置
├── vue-loader.conf.js // vueloader的配置信息
├── webpack.base.conf.js // dev和prod的公共配置
├── webpack.dev.conf.js // dev环境的配置
└── webpack.prod.conf.js // prod环境的配置
Config文件夹下文件详解
dev.env.js
config内的文件其实是服务于build的，大部分是定义一个变量export出去
use strict //[采用严格模式]/**
* [webpack-merge提供了一个合并函数，它将数组和合并对象创建一个新对象
