[webpack 学习系列] 1. webpack 工具的由来
webpack 工具的由来
-
什么是 webpack ？
官网是这样介绍的，webpack is used to compile JavaScript modules.。webpack 是一个模块打包器（module bundle），常被用来编译javascript模块（当然不仅仅是这样，webpack 已经支持打包各种各样的模块）。那么我们不禁想问，什么是模块呐？ -
什么是模块（module）？
大致来说，一个 .js 文件就是一个模块。那模块有什么好处呐？
- 提高代码的复用率。当一个模块编写完毕后，就可以被其他地方引用。像我们在开发过程中，也经常引用别人的模块（内置模块或者第三方模块）
- 提高代码的可维护性。模块被多处引用，当该模块出现 bug 或业务逻辑发生变更的时候，只需要修改该模块的代码即可。
- 避免函数名和变量名冲突。相同的函数名和变量可以出现在不同的模块中，因为每个模块都有自己专属的作用域。
了解了模块的概念之后，我们来聊聊 webpack 出现之前的历史吧~
- webpack 工具出现之前的历史
让我们穿越到jquery出现的时代吧。在 jQuery 出现之前，我们常常使用一些原生 dom 操作接口和ajax来处理页面的变化。类似如下：
document.getElementById('root')
写的多了，就发现代码很重复且不方便。所以就有了 jQuery 的出现，它让 dom 操作的逻辑写起来更加方便和高效。写法变成了下面这样，效果和上面的代码是一样了。是不是写起来简洁很多0.0
$('#root')
后来 jQuery 大火，也不断涌出优秀的工程师，创造了大量 jQuery 插件和 UI 库。当我们需要某个功能的插件时，只需要 script 标签把该插件的 js 文件引用即可。但是随之也出现了一些问题:
- 随着业务功能越来越复杂，很可能会出现一个页面里面引用几十个
jQuery插件的情况。所以就出现了这样一个问题，因为浏览器是单线程，Script的加载，会影响到页面的解析与呈现，导致著名的白屏问题（当时前端用力过猛，body中的所有东西都是动态生成的）。- 全局污染的问题。因为插件的质量参差不齐，某些插件可能会存在全局污染的问题。
后来一些优秀的前端工程师就从后端取经，引入了模块系统。前端模块系统常见的解决方案主要有如下四种：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 的打包处理，变成了对应的静态资源。输出的文件与之前相比，看起来是不是简洁多了。
接下来我们看看官网的一个小例子：
src/index.js 引用了 bar 模块并调用其方法。我们配置 webpack.config.js 的打包入口为
./src/index.js，打包输出文件放到当前模块的目录名下，文件名为 bundle.js。最后在网页中通过script标签引入。通过上面的例子可以很清晰的看出，我们把两个 js 文件打包处理变成了一个，当引用文件很多或者文件之间依赖很复杂的情况下，webpack 都可以快速帮我们打包出最终的文件。
- webpack 和 rollup
webpack 和 rollup 都是前端构建工具，使用场景一句话概括：
在开发应用时使用 Webpack，开发库时使用 Rollup
参考文章：
前端开发变迁史
模块
webpack 和 rollup
webpack 官网
