你可能不知道的JavaScript

编写loader和plugin

2021-06-08  本文已影响0人  林一一呢

原文地址

编写loader和plugin

github

一、loader

1.loader 介绍

loader 是什么

loader 其实是一个函数,对匹配到的内容进行转换,将转换后的结果返回。

loader 作用

webpackloader 就像是一位翻译官。webpack 只认识 JavaScript 这们语言,对于其他的资源通过 loader 后可以转化做预处理

常见的loader

4. loader 的三种使用方式

module.exports = {
    module:{
        rules:[{
                test:/\.css$/,
                use:['css-loader'],
                // use:{loader:'css-loader',options:{}}
            }
        ]
    }
}
webpack --module-bind 'css=css-loader'
import txt from 'css-loader!./file.css';

2. 编写一个 loader

思路:前面我们说过 1.loader 是一个函数;2.对匹配到的内容进行转换;3.再将转换内容返回,按照这个思路我们可以编写一个最简单的loader

// 在 ./loader/replaceLoader.js 创建一个替换字符串的 loader
module.exports = function(source) {
    return source.replace('a', 'b')
}

// 在webpack.config.js 使用 自己写的loader
module.exports = {
    module:{
        rules:[{
            test:"/\.js$/",
            use:[{
                    loader: path.resolve(__dirname, './loader/replaceLoader.js')
                    options:{
                        name: '林一一'   
                    }
                }
            ]
        }]
    }
}

// 或者使用 replaceLoader
module.exports={
    resolveLoader:['node_modules', './loader']
    module:{
        rules:[{
            test:"/\.js$/",
            use:['resolveLoader']
        }]
    }
}

上面就是一个最简单的编写 loader 的案例

const loaderUtil = require('loader-utils')
module.exports = function(source) {
    console.log(this.query.name) // 林一一
    const options = loaderUtil.getOptions(this)
    return source.replace('a', 'b')
}
const loaderUtils = require('loader-utils')
module.exports = function(source) {
    const options = loaderUtils.getOptions(this)
    const callback = this.async()
    setTimeout(()=>{
        console.log(options.name)
        let res = source.replace('a', options.name)
        callback(null, res, sourceMaps, ast)
    }, 4000)
}

上面的代码会在4秒后打包成功,如果没有 this.async() 异步操作就会失败,callback() 回调函数将结果放回。

总结编写 loader 的思路

  1. loader 是一个导出函数,有返回值,可以借助第三方模块和Node api 实现。
  2. loader 可以使用 loader-utils 接收到options 中传递过来的参数
  3. loader 的异步编写需要显示的申明 const callback = this.async() 表明异步。
  4. loader 如果需要处理二进制文件也需要声明exports.raw = true
  5. loader 的允许结果会被webpack缓存,如果需要关闭webpack的缓存结果需要声明this.cacheable(false)
  6. 编写后的本地loader 可以借助 Npm linkresolveLoader 导入。

二、webpack 的构建流程

再讲 plugins 之前需要先清楚 webpack 的构建流程是怎样的

  1. 初始化参数。从配置文件和 shell 语句中合并的参数
  2. 开始编译。将上一步得到的参数初始化成 complier对象,加载所有的导入插件,执行对象的 run 方法开始执行编译;
  3. 确定入口。从配置的 entry 入口找出所有的入口文件。
  4. 编译模块。根据入口文件的依赖,调用所有配置的loader进行转换。
  5. 完成模块编译并输出。根据入口文件之间的依赖关系,形成一个个代码块 chunk
  6. 输出完成。将形成的代码块 chunk 输出到文件系统。

上面初始化形成的 complier对象 会被注入到插件的 apply(complier)内。complier对象对象包含了 Webpack 环境所有的的配置信息比如 options, loaders, plugins等等属性,可以简单的认为complier是 webpack 的实例,通过compler.plugin()可以监听到 webpack 广播出来的事件。

三、plugin

1 plugin 介绍

plugin 是什么

plugin 是一个插件,这个插件也就是一个类,基于事件流框架 Tapable 实现。在 webpack 的构建流程中在初始化参数后,就会加载所有的 plugin 插件,创建插件的实例。

plugin 作用

plugin 通过钩子可以涉及到 webpack 的整一个事件流程。也就是说 plugin 可以通过监听这些生命周期的钩子在合适的时机使用 webpack 提供的API 做一些事情。

常见的 plugin

plugin 的使用方式

plugins中使用

const ServiceworkerWebpackPlugin = require('serviceworker-webpack-plugin')
module.exports = {
    plugins:[
        new ServiceworkerWebpackPlugin(),
    ]
}

2 编写一个 plugin

思路:plugins 是一个类,webpack 为 plugin 提供了很多内置的 api,需要在原型上定义 apply(compliers) 函数。同时指定要挂载的 webpack 钩子。

class MyPlugin {
    constructor(params){
        console.log(params)
    }
    // webpack 初始化参数后会调用这个引用函数,闯入初始化的 complier对象。
    apply(complier){
         // 绑定钩子事件
        // complier.hooks.emit.tapAsync()
        compiler.plugin('emit', compilation => {
            console.log('MyPlugin')
        ))
    }
}
module.export = MyPlugin

compilation对象 包含当前的模块资源、编译生成资源、和能监听变化的文件。每一个文件发生变化后,都会生成一个 compilation 对象,通过 compilation 也能读取到 compiler 对象。
调式plugin 可以使用 node 的调式工具在 package.json 中添加 "debug":"node --inspect --inspect brk node_modules/webpack/bin/webpack.js"

总结编写 plugin 的思路

  1. 编写一个 class 类 。
  2. 在类中定义一个 apply 方法。
  3. 在应用方法apply()中指定挂载的 webpack 事件钩子complier.hooks.
  4. 处理 webpack 内部实例的特定数据。
  5. 功能完成后调用 webpack 提供的回调。

四、面试题

1. loader 和 plugin 的区别

  1. loader 是一个函数,用来匹配处理某一个特定的模块,将接收到的内容进行转换后返回。在webpack 中操作文件,充当文件转换器的角色。在 modules.rules 中配置。
  2. plugin 是一个插件,不直接操作文件,基于事件流框架 Tapable 实现,plugin 通过钩子可以涉及到 webpack 的整一个事件流程。也就是说 plugin 可以通过监听这些生命周期的钩子在合适的时机使用webpack 提供的API 做一些事情。在plugins中配置插件

2. loader 的编写思路

参上

3. plugin 的编写思路

参上

4. complier 和 compilation 区别

  1. complier 对象暴露了 webpack 整一个生命周期相关的钩子,是 webpack 初始化的参数的产物,包含options, entry, plugins等属性可以简单的理解为webpack的一个实例。
  2. compilation 对象是 complier 的实例,是每一次 webpack 构建过程中的生命周期对象。每一个文件发生变化后都能生成一个complition对象。
    总结:两个对象都有自己的生命周期钩子,compilation 对象 负责的是粒度更小的生命周期钩子。compiler对象是webpack整一个整个生命周期钩子的对象。

参考

webpack之loader和plugin简介

webpack 构建流程

webpack loader和plugin编写

深入Webpack-编写Loader

上一篇 下一篇

猜你喜欢

热点阅读