webpack基础

在这里我仅仅的是对webpack作个讲解，webpack这个工具很是强大，解决了咱们前端很繁琐的一些工具流程繁琐的事情。若是感兴趣的同窗，简易仍是看官网吧。

中文连接地址：https://www.webpackjs.com/

为何要使用webpack？

现今的不少网页其实能够看作是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了不少好的实践方法

• 模块化，让咱们能够把复杂的程序细化为小的文件;
• 相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能转换为JavaScript文件使浏览器能够识别；
• Scss，less等CSS预处理器
• ...

这些改进确实大大的提升了咱们的开发效率，可是利用它们开发的文件每每须要进行额外的处理才能让浏览器识别,而手动处理又是很是繁琐的，这就为WebPack类的工具的出现提供了需求。

什么是webpack

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

 

官网的一张图，你是否能看明白呢？

中间那个是webpack的图标，能够看做webpack这个工具。左边是咱们项目生产环境下因此来的包，经过这个webpack工具咱们能够打包全部的图片，因此的脚本，全部的样式等等，最后打包成了右边的静态资源文件。

注意了：每一个webpack的版本都有不一样的功能，并且高版本的webpack可能会出现意想不到的bug，在这里推荐你们使用2版本的webpack。

另外webpack还支持咱们的模块化加载。在以前的学习可没有这个功能哦！这让咱们更加快速的开发。