webpack4.29.x成神之路（一） webpack简介

目录

1、什么是webpack

一般一个页面，至少都会对应一个js文件、html文件和css文件，而这个js文件，咱们称它为入口文件。

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

2、为何要用webpack

在早期咱们每一个页面都会以script标签的形式，引入很是多的js脚本，如图：

这些外部引入的库会在window上挂本身的变量，这样咱们在main.js中能够直接使用它们的方法：

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

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

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

模块化后的main.js大体像这样：

现在webpack愈来愈成熟，除了解决模块化问题，配合其余插件能够作到各工具语言的集成编译和压缩等，已经成为前端自动化神器。

下节：起步