webpack 初探

webpack--模块化加载器和打包工具。

webpack号称require anything并且按需加载，具有监听、自动打包、压缩混淆脚本等强大功能，在项目中使用webpack能够方便的进行模块依赖管理，比如直接使用require()就能引入一个资源（js文件，css文件，html文件以及图片文件均可），并且原生的webpack支持commonJs和AMD规范。

webpack的默认配置文件是webpack.config.js，其写法和node相似，模块化，暴露接口。具体其配置参数建议查看官网文档.

观察 webpack 打包后的输出文件能发现 webpack 的打包原理很简单.

该图是我新建项目的目录结构以及 webpack 配置文件的内容。

入口文件 index.js 文件中引入了a.js 和 b.js 两个文件：

a.js 文件中引入了 b.js 文件

b.js 文件内容很简单，就一个打印输出

cmd执行 webpack 命令...

花费114ms，打包完成，接下来我们查看打包之后的输出文件：

整个打包之后的bundle.js文件实际上是一个匿名函数自执行方法，函数的方法体部分是webpack打包的引导部分，其中定义了__webpack_require__方法。而参数则为一个数组。数组的每一项都是个function。function的内容实则是每个模块的内容。
接下来我们主要来看看文件的截图部分。

由这部分代码很容易能看出，webpack将每一个js文件及其依赖封装成一个单独的部分，而js文件中的 require 方法对应的就是__webpack_require__，__webpack_require__ 会根据传入的 moduleId 再去加载对应的代码。由于webpack是将文件中的依赖文件采用一个编号替代，所以一个文件即使是被引用多次，webpack也只会将其打包一次！