Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性
Gulp/Grunt是一种能够优化前端的开发流程的工具
而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
日常啰嗦：学了很多打包工具的皮毛，然后又很理直气壮地全部忘光了，导致一个都不熟。整理一下，希望有个大致的印象对各个工具的功能。
这是在vue项目里面使用的打包工具，执行vue run build就会生成dist文件