面试官：说说loader 和 plugin

[yang-xianzhu]

loader

1、介绍

官方介绍：loader用于对模块的源代码进行转换。loader可以使你在import或load（加载）模块时预处理文件。因此，loader类似于其他构建工具中任务task，并提供了处理前端构建步骤的得力方式。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript或将内联图像转换为data URL。loader甚至允许你直接在JavaScirpt模块中importCSS文件。

2、特性

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

可以通过loader的预处理函数，为JavaScript生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转换（或者编译）等。

plugin

插件 是 webpack 的 [支柱](https://github.com/webpack/tapable) 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！

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

webapck插件是一个具有apply方法的JavaScript对象。apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问compiler对象。

实现一个自己的plugin：

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建正在启动！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有 hook 中重复使用。