什么是webpack

webpack

组件化、模块化和单文件引入

JavaScript代码放在同一个.vue文件当中，强大的Webpack可以将这些代码分离出来，并分别与其他同类型的代码打包到一起。而我们不需要管Webpack内部是如何运作的，只需要知道单文件组件形式确实会为我们的工作带来极大的便利性。

一个Less文件可以通过引入其他多个Less文件，最后只需将这一个Less文件所编译成的CSS文件引入页面即可。之前我使用的Less编译工具一直都是koala，它是一个可视化的编译软件，可以进行Less代码的编译以及CSS和JS代码的压缩。正因为Less很好用，并且节省了HTTP请求数，然后我就在想，要是JS也能像Less一样模块化引入并且打包成一个JS文件就好了。

但是Webpack不仅具有它们所具备的这些编译压缩合并功能，同时还具备模块化开发和组件式开发等优点，在目前流行的前端框架React和Vue中也得到很好的支持。

Webpack的出现，将前端不断出现的新模块、新资源、新需求，进行自动化整合、梳理、输出，使得前端开发者更加专注业务需求。

webpack就是把你写好的只有你自己认识的程序，整理翻译打包成漂亮的，大家都能看的程序。

最后总结一下Webpack的主要优势：

① 模块化开发（import，require）
② 预处理（Less，Sass，ES6，TypeScript……）
③ 主流框架脚手架支持（Vue，React，Angular）
④ 庞大的社区（资源丰富，降低学习成本）