webpack是目前被大家广为使用的模块打包器。从命令行输入webpack或者在package.json的npm scripts中配置webpack脚本都可以使用webpack。虽然效果是一样的，但是两者有区别吗？最近在阅读源码的过程中发现了这个事情，原来两者是有区别的。

vue-cli是vue官方出品的一个脚手架工具，通过vue-cli可以快速的搭建一个vue的SPA应用的开发框架。其内部提供了多种vue-js-template，作用就是通过相应的template去配置生成项目初期的内容。其中webpack模板提供了全面丰富的webpack配置，包括热重载、单元测试、静态检查以及css提取等功能。

webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图表(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

webpack作为一个模块打包工具，不仅可以打包js文件，还可以打包其他非js文件。下文仅针对js文件，从 CommonJS 模块和 ES6 模块两种处理模块的方式对 webpack 的打包机制进行解释。