【20180822】Webpack 手动实现一个 Loader 和 Plugin

[zhongxia245]

这里因为是用思维导图的方式来继续 webpack loader 和插件的介绍以及基本的开发流程
看详细代码：点这里

[zhongxia245]

[zhongxia245]

建议直接看图

• 找时间整理一下这块笔记
  因为记录笔记的思路使用思维导图，这里是思维导图导出的 MD

Webpack编写 Loader 和 Plugin 插件

loader

文章地址：https://juejin.im/post/5a698a316fb9a01c9f5b9ca0

loader是什么？

• 把源模块转换成通用模块的加载器
• 本质上就是一个 node 模块，导出一个函数。 webpack 会把需要转换的资源的时候调用该函数， 该函数可以利用 this 调用 Loader 提供的 API。

loader 有什么用？

• 把一个资源引入，然后经过 loader 的处理，返回一个新的资源
• 比如：ES6的代码，经过 fable-loader 处理后，返回 浏览器可执行的ES5的代码

loader 怎么用？

• 1、基本使用的web pack.config配置
  • 通过 rule 配置资源匹配条件
  • 通过 use.loader 配置使用的 loader， use.options 配置参数
• 2、进阶使用
  • 可能多要多个 loader 来处理，类似 style-loader + css-loader + less-loader
  • 使用顺序是 ， 从右往左， less => css => style

如何开发 loader?

• 几个技巧

  • 1. 一个 loader 只处理一件事情，方便维护
  • 2. 链式组合
    • 第一点的延伸，把一件事分成几个步骤来处理。
  • 3. 模块化
  • 4. 无状态
    • 在多次模块的转化，不应该保留 loader 的状态
  • 5. 使用 Loader 实用工具
    • loader-utils
      • 获取 options 参数

• 实际演练

  • 比如开发一个压缩 html 的 loader
  • 常见问题
    • 在本地开发 loader 的时候，如何测试？
      • 配置 resolveLoader ，指定 loader 的位置
      • resolveLoader: {
        modules: [path.join(__dirname, './src/loaders'), 'node_modules']
        },
    • 开发的 loader 如何不阻塞其他任务执行？
      • loader 处理有两种模式
        • 1. 直接 return 处理后字符串
        • 2. 使用 this.callback 回调的方式，返回处理后的数据
        • 3. 也可以使用异步的方式处理， callback = this.async()， 然后在用 callback 回调返回数据
    • 最为最后一个处理资源的 loader， 需要写成 CommenJS 的格式
      • 即返回的数据应该是这样的,通过字符串拼接成 module.exports 的结构
      • return “module.exports = ” + resultSource
  • 详细源码 ： https://github.com/zhongxia245/webpack-demo

plugin

plugin 是什么？

• plugin 是扩展webpack的功能的一个 带有 apply 属性方法的对象

plugin 有什么用？

• 插件存在的目的就是为了解决 loader 如何解决的问题

如何使用 plugin?

• 在web pack 配置项的 plugins 数组中，加载插件的配置

如何自定义 plugin?

• webpack 插件是一个带有 apply 属性的对象
  • apply 属性会被 webpack compiler 调用
• compiler 放出来一些钩子函数，然后可以再钩子函数上写插件相对应的功能
• class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
  compiler.hooks.run.tap(pluginName, compilation => {
  console.log('webpack 构建过程开始...')
  })
  }
  }

参考文档：https://webpack.docschina.org/concepts/plugins/

loader 和 plugins 的区别？

1. 都扩展了 webpack 的功能

2. loader 用于加载某一些资源，它作用于一个一个文件上

• 更专注于文件转换领域

3. plugins 功能更丰富，可以去解决 loader 解决不了的问题

• 比如文件压缩，文件名加 hash，文件上传七牛，复制文件，提取公共代码等

为什么需要他们呢？

webpack 本身只提供了对 commons 的 js 处理，其他的比如 less，sass，es6, img 等并没有处理方法

但是 webpack 有一个强大的插件机制， 不能处理的比如 es6,css, less 等则可以通过加载相对应的 loader 来处理