webpack4.29.x成神之路(一) webpack简介

目录

一、什么是webpack

通常一个页面,至少都会对应一个js文件、html文件和css文件,而这个js文件,我们称它为入口文件。

webpack4.29.x成神之路(一) webpack简介_第1张图片

webpack会分析入口文件的各种依赖关系,比如main.js中引入了什么css、js、图片?而依赖的某js文件中是否又依赖了其它的资源文件?这一系列复杂的依赖关系,webpack都会精准的帮我们梳理好,并且打包编译成最终线上代码。

webpack4.29.x成神之路(一) webpack简介_第2张图片

二、为什么要用webpack

在早期我们每个页面都会以script标签的形式,引入非常多的js脚本,如图:

webpack4.29.x成神之路(一) webpack简介_第3张图片

这些外部引入的库会在window上挂自己的变量,这样我们在main.js中可以直接使用它们的方法:

webpack4.29.x成神之路(一) webpack简介_第4张图片

这样做的坏处:
污染全局变量;
当js脚本过多且有依赖关系时,万一引入顺序错误将导致报错

webpack最初就是为了解决这个问题而诞生的一个模块打包器。它对各种模块化方案提供开箱即用般的支持。

有了模块化,每个js脚本都是一个封闭的模块,在js中要用其他模块的方法前必须先引入才能使用, 这样即可有效解决上述问题。

模块化后的main.js大致像这样:

webpack4.29.x成神之路(一) webpack简介_第5张图片

如今webpack越来越成熟,除了解决模块化问题,配合其他插件可以做到各工具语言的集成编译和压缩等,已经成为前端自动化神器。

下节:起步

你可能感兴趣的:(webpack)