介绍Webpack
Webpack是一个前端模块化打包工具。
从定义中，我们可以窥探出两个重点：一个是模块，一个是打包。
打包的概念
这是Webpack官网的一张图，意思就是说，当你开发项目的时候，你可能会有各式各样的文件，比如sass,less。这些如果你直接部署到服务器上，是不行的，因为浏览器从服务器上请求来sass/less文件，他根本解析不了。也就是我们得先把less/sass文件，转化成css文件。之后再把它部署到服务器上，浏览器向服务器请求css文件，css文件浏览器是肯定能解析的。还有一种情况，你开发项目的时候，可能使用了很多的es6语法。但是并非所有的浏览器都能很好的解析es6的语法。这时候，打包工具的作用又体现出来了，他能把用到的这些es6的语法很好的处理成我们浏览器可以读的懂的更通俗的js.
打包的概念就应该很好理解了，就是把我们的项目，打包整合成一个包或者多个包。于此同时，他还会对项目的内容进行一层“翻译”,变成我们绝大多数浏览器能解析的代码（看不懂的文件转化为看得懂的文件sass->css看不懂的代码转化成看得懂的代码es6-->普通js方案）
那其实市面上有很多的打包工具，可以实现这个功能了，比如grunt,gulp, Webpack.那为什么Webpack可以脱颖而出呢？
这就要涉及到Webpack的第二个特性了。模块化
Webpack模块化
前文我们已经谈到前端模块化的重要性和必然性了。而Webpack正是由于能很好支持我们进行模块化开发，并且很好的处理我们每个模块之间的依赖关系。所以它成为了主流的打包工具，其他打包工具只能望其项背。
我对Webpack模块化的理解是这样的：
- 他能支持我们JS文件使用各种各样的模块化规范（es6/commonjs/amd/cmd... ）来实现模块化。他会找到一种浏览器能看懂的方案实现我们的模块化的效果。从而用这种方案去替换浏览器看不懂的模块化规范。
- 不仅每个JS文件能当作模块，还能把css文件，png文件，json文件等等都能看作是一个模块。
- 它能很好的处理我们各个模块之间错综复杂的关系网
- js文件模块之间的导入导出不就形成了一张错综复杂的关系网
- js文件模块中导入css文件模块，这也形成了一层关系
那么Webpack打包工具在打包的时候，可以很好的处理好每个模块之间的依赖关系，将他们整体进行打包。 正是由于这一点，当我们打包项目的时候，往往只需要打包我们的入口文件:main.js。那他会处理好我们模块之间的依赖关系，从而把整个项目都进行打包。
Webpack和gulp/grunt的对比
gulp/grunt的核心
gulp/grunt的核心其实是task,你定义一系列的task(例如ES6、ts转化，图片压缩，scss转成css)，之后要grunt/gulp依次执行task,让整个流程自动化。 ##Webpack和gulp/grunt的不同 Webpack强调的是模块化，而grunt/gulp强调的是流程的自动化，模块化不是它的重心。
gulp/grunt的使用场景
项目没有用到模块化的思想，或者说模块依赖特别简单的时候。
