2. webpack中loader和plugin的区别

什么是webpack

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

webpack由nodejs编写，本身功能不多，只能用于处理JS

核心概念

• entry： 入口，指示 Webpack 从哪个文件开始打包
• output： 输出，告诉 Webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
• mode： 模式，告知webpack使用相应模式的内置优化
• loader：模块代码转换器，webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
• plugin： 扩展插件。在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的api改变输出结果。常见的有：打包优化，资源管理，注入环境变量。
• chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

loader（加载器）

webpack提供了一种处理多种文件格式的机制，便是Loader。我们可以将Loader看成一个转换器，它可以将某种格式文件转换成webpack支持打包的模块。

webpack中一切皆可模块化。js、css、less、ts、图片等都是模块，不同模块的加载是通过模块加载器来统一管理的，当我们需要使用不同的 Loader 来解析不同类型的文件时，我们可以在module.rules字段下配置相关规则。例如webpack处理图片资源

特点

• loader本质上是一个函数
• loader支持链式调用，webpack打包时是按照数组从后往前的顺序将资源交给loader处理的。
• 支持同步和异步

代码结构

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

module.exports = function(source, sourceMap?, data?) {
  // 获取到用户给当前 Loader 传入的 options
  const options = loaderUtils.getOptions(this);
  // TODO： 此处为转换source的逻辑
  return source;
};

常用的loader

• babel-loader
• ts-loader
• markdown-loader ...

plugin

Webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。

Webpack 通过 Tapable 来组织这条复杂的生产线。 Webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 Webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。