前端打包工具之webpack

一.什么是webpack

是为js准备的一个打包工具，可以把很多的模块打包成很少的静态文件，webpack最大的特性就是进行代码分割，这样项目加载的时候就会只加载现在需要的文件。

图片左边的箭头指的是文件间的依赖关系，右边是打包后的文件

二.为什么使用webpack

1.模块化：让我们可以把复杂的程序细小化为小的文件 。

2.类似于TypeScript这种在JavaScript基础上拓展的开发语言，使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别。

3.文件的依赖注入，比如传统的页面开发，需要引入多个script标签，而且还有顺序限制，如果开发多个文件的时候，这些标签又得都重新引入，这明显是繁重复杂得，webpack可以解决文件之间得依赖关系。

三.webpack中得loaders

模块可以通过loader去处理各种各样的文件，webpack本身只能打包Javascript文件，对于其它资源，例如css,图片或者一些自定义的文件，是没办法加载的，这就需要对应的Loader将资源转化，加载进来。

再比如，样式文件中都使用了stylus语法，是不能被浏览器识别的，这时候我们就需要使用对应的loader,来把less语法转换成浏览器可以识别的css语法。

四.webpack成为主流打包工具的原因

1.可以把依赖树切分到不同的代码块中，按需加载这些依赖。

2.可以减少初始化的加载时间。

3.可以整合第三方的类库，并把第三方的类库作为一个模块在项目中引用。

五.webpack中的热更新

这个机制可以做到不用刷新浏览器而将新变更的模块替换到旧的模块。

 

目前只了解以上关于webpack的知识，以后会补充关于webpack的知识。