在学习webpack之前,需要了解两个问题
① 什么是webpack?
② webpack 有什么作用
首先我来对第一个问题作出解释
webpack 是一个构建工具, 构建工具是用来统一使用各种npm包。 比方说 我们得js文件里面有es6得语法,但有些浏览器不认识es6语法, 我们需要下载babel包,less文件需要转换成css,又需要下载包, 压缩文件也需要下载包等等。 你想使用这些包,需要对每个包都输入指令才能运行,如果你的包很多,那你输入的指令就会非常多,这样就会相当繁琐。 构建工具就是用统一的命令告诉这些包应该怎样做。
那第二个问题 webpack有什么作用,其实在将什么是构建工具时,就相当于讲了webpack的作用了,也就是统一使用各种包,对代码进行转码、压缩、优化、从而提高网站运行效率等等。
webpack 也是一个静态资源打包器
那静态资源打包器是如何工作的?
这里要学习两个概念。 chunk 和bundle
打包器开始工作会先找到入口文件,根据入口文件找到有依赖关系的文件,比方说入口文件引入了另外一个文件,那这两个文件就有了依赖关系。 A引入了B , B又引入了C。 ABC都有了依赖关系。 然后将这些依赖关系的文件,形成整个代码块。也就是chunk。然后对chunk 进行处理 转码 压缩 等等优化。 处理完后将代码输出出去, 输出出去的代码就叫bundle 。
以上这些就是webpack的基础概念。