这是我参与「第五届青训营 」伴学笔记创作活动的第 26 天

1.Webpack 的本质

1.本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 2.它的本质是一个模块打包器，其工作是将每个模块打包成相应的bundle。

2.Webpack 定义解析

1. webpack的核心是将JavaScript应用程序的静态捆绑模块。
2. 当webpack处理应用程序时，它会在内部构建一个依赖关系图，它映射项目所需的每个模块并生成一个或多个包。

3.Webpack 优势

其优势主要可以归类为如下几个：

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2. 能被模块化的不仅仅是 JS 了。

3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

4. 扩展性强，插件机制完善

4.Loader 函数接收三个参数

1. source：资源输入，对于第一个执行的 loader 为资源文件的内容；后续执行的 loader 则为前一个 loader 的执行结果。
2. sourceMap: 可选参数，代码的 sourcemap 结构。
3. data: 可选参数，其它需要在 Loader 链中传递的信息，比如 posthtml/posthtml-loader 就会通过这个参数传递参数的 AST 对象。

5.认识 Loader ：链式调用与其他特性

1. loader 可以是同步的，也可以是异步的。
2. 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
3. loader 运行在 Node.js 中，并且能够执行任何操作。
4. oader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。
5. 插件(plugin)可以为 loader 带来更多特性。
6. 链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。