为什么要用webpack！

Posted 2022-09-28 amylin-blogs

为什么要用webpack？

 

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

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

 

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

Scss，less等CSS预处理器；

 

这些改进确实大大提高了开发的效率，但是利用他们开发的文件往往需要额外的处理才能被浏览器识别，而手动处理又是非常繁琐的，这就为webpack这些工具的出现提供了需求。

 

webpack是模块打包器，他可以分析你的项目结构，找到JavaScript模块以及其他一些不能被浏览器直接识别的文件，比如typescript、less、scss等，然后把他们转换和打包为合适的格式供浏览器使用。

 

webpack和grunt/Gulp工作方式的区别：

 

grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤，工具之后可以自动替你完成这些任务

 

webpack的工作方式是：把你的项目当成一个整体，通过一个给定的主文件index.js，webpack将从这个文件找到项目的所有依赖文件，使用loader处理他们，最后打包为一个或多个浏览器可以识别的JavaScript文件

 

webpack、gulp/grunt、npm打包方面有什么区别：

 

1.webpack是模块打包器，把所有模块打包成一个或少量文件，使你只需要加载少量文件即可以运行应用

 

2.gulp/grunt是自动化构建工具，无法打包模块，插件比webpack丰富

 

3.npm是node的包管理器，用于管理node的第三方软件包，npm最大的优势是任务命令，只需要几个任务命令足以完成你的模块打包和自动化构建的所有需求。