webpack:什么是webpack?为什么要学习webpack?
现如今的网页可以看做是功能丰富的应用,这离不开复杂的JavaScript和一大堆依赖包
为了简化开发,前端社区涌现了一种好的方法:模块化。模块化的开发将复杂的程序细化为小的文件。
模块化开发确实大大提高了我们的效率,但是这些小的文件需要额外的处理才能让浏览器识别。你肯定不想自己手动处理。webpack就是干这个活儿的。
webpack可以看做是模块打包机,他要做的事情是:分析你的项目结构,找到JavaScript模块(小的文件)以及其它的一些浏览器不能直接运行的拓展语言(scss,typeScript等),并将其转化为合适的格式提供给浏览器使用。方便实现模块化开发。
vue脚手架就内置了webpack
webpack的工作方式:
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),webpack将从这个文件找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可以识别的JavaScript文件。
Webpack性能优化:
主要从两个方面:构建过程中的时间多少,打包后的体积大小。还有一个特定的专门优化的插件--tree-shaking。
如何减小打包之后的体积大小:Webpack内置了一个插件,我们直接使用就好。
第一:const,引入插件。这个插件不用再npm install,因为这个打包减小体积这个过程比较重要,所以Webpack内置了这个插件。
第二:使用插件在要导出的那个对象里面--moudule.export。