webpack学习笔记

Posted 2020-10-16 木之子梦之蝶

一、webpack是什么

WebPack可以看做是模块打包机：

它做的事情是，分析你的项目结构，

找到javascript模块

以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），

并将其打包为合适的格式以供浏览器使用。

二、为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。

为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：

使我们能够实现目前版本的JavaScript不能直接使用的特性，

并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

三、webpack的工作方式

Webpack的工作方式是：

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），

Webpack将从这个文件开始找到你的项目的所有依赖文件，

使用loaders处理它们，

最后打包为一个浏览器可识别的JavaScript文件。