目录

一、什么是webpack

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

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

二、为什么要用webpack

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

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

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

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

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

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

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

下节：起步