webpack 工具的由来

• 什么是 webpack ？
  官网是这样介绍的，webpack is used to compile JavaScript modules.。webpack 是一个模块打包器（module bundle），常被用来编译 javascript 模块（当然不仅仅是这样，webpack 已经支持打包各种各样的模块）。那么我们不禁想问，什么是模块呐？

• 什么是模块（module）？
  大致来说，一个 .js 文件就是一个模块。那模块有什么好处呐？

1. 提高代码的复用率。当一个模块编写完毕后，就可以被其他地方引用。像我们在开发过程中，也经常引用别人的模块（内置模块或者第三方模块）
2. 提高代码的可维护性。模块被多处引用，当该模块出现 bug 或业务逻辑发生变更的时候，只需要修改该模块的代码即可。
3. 避免函数名和变量名冲突。相同的函数名和变量可以出现在不同的模块中，因为每个模块都有自己专属的作用域。

了解了模块的概念之后，我们来聊聊 webpack 出现之前的历史吧~

• webpack 工具出现之前的历史
  让我们穿越到 jquery 出现的时代吧。在 jQuery 出现之前，我们常常使用一些原生 dom 操作接口和 ajax 来处理页面的变化。类似如下：

document.getElementById('root')

写的多了，就发现代码很重复且不方便。所以就有了 jQuery 的出现，它让 dom 操作的逻辑写起来更加方便和高效。写法变成了下面这样，效果和上面的代码是一样了。是不是写起来简洁很多0.0

$('#root')

后来 jQuery 大火，也不断涌出优秀的工程师，创造了大量 jQuery 插件和 UI 库。当我们需要某个功能的插件时，只需要 script 标签把该插件的 js 文件引用即可。但是随之也出现了一些问题:

1. 随着业务功能越来越复杂，很可能会出现一个页面里面引用几十个 jQuery 插件的情况。所以就出现了这样一个问题，因为浏览器是单线程，Script的加载，会影响到页面的解析与呈现，导致著名的白屏问题（当时前端用力过猛，body中的所有东西都是动态生成的）。
2. 全局污染的问题。因为插件的质量参差不齐，某些插件可能会存在全局污染的问题。

后来一些优秀的前端工程师就从后端取经，引入了模块系统。前端模块系统常见的解决方案主要有如下四种：AMD（requireJs） ，CMD（seaJS），commonJs，ES6的模块系统。从此，前端就有了模块的概念，每个模块都有属于自己的作用域，便不存在全局污染的问题了。但是，当模块很多的时候，模块之间的依赖关系也变得复杂，页面中不仅需要引用大量模块，另外引用模块的顺序也是讲究了，在导入 A 模块的时候，我们必须先把模块 A script 引入进来，不然变会报错。如下：

<script src="./a.js">
<script src="./index.js"> // import * from a; 引入了 a 模块，所以 a.js 模块的引用必须在该模块前面

所以这里我们就需要一个模块打包工具来帮我们处理这样的问题（模块之间依赖的问题，页面中 script 引用模块过多的问题），所以就有了 webpack。

• webpack 工具的出现

随着前端工程越来越复杂，单独建几个文件（html，css，js）来写业务代码，这样的方式是无法保证项目的可维护性的。

所以我们就想，把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块自己做自己的事情，这样就可以保证项目的维护性和可扩展性了。

但如果你有几千个模块，那能在项目上引用几千个文件吗？并且模块的引用顺序也是有讲究的，不然就会出问题。所以当项目大到这个程度时候，我们就得借助工具来管理我们的模块了。webpack 就是这样一个工具。

那 webpack 这个工具主要来帮助我们做什么工作那？如下图所示，各种各样的依赖模块互相引用或被引用，最终通过 webpack 的打包处理，变成了对应的静态资源。输出的文件与之前相比，看起来是不是简洁多了。

• webpack 和 rollup

webpack 和 rollup 都是前端构建工具，使用场景一句话概括：

在开发应用时使用 Webpack，开发库时使用 Rollup

参考文章：
前端开发变迁史
模块
webpack 和 rollup
webpack 官网