Webpack

概念

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

Loader

loader用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。

module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。

多个 Loader 串联

• 最后的 loader 最早调用，将会传入原始资源内容。

• 第一个 loader 最后调用，期望值是传出 JavaScript 和 source map（可选）。

• 中间的 loader 执行时，会传入前一个 loader 传出的结果。

Plugin

插件 是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！

插件目的在于解决 loader 无法实现的其他事

Loaders 关注代码中的单个资源，Plugins 关注整体流程，可以接触到 webpack 构建流程中的各个阶段并劫持做一些代码处理。