《玩转webpack》学习笔记之day17第七章 68讲-74讲

迷路的小兰
67 阅读1分钟

第七章 编写loader和插件

68讲 loader的链式调用与执行顺序

一个最简单的loader代码结构

定义： loader只是一个导出为函数的JavaScript模块

    module.exports = function(source) {
        return source
    };

多个Loader串行执行，顺序从后到前

image.png

函数组合的两种情况

Unix中的pipline 从左到右 Compose(webpack采取的是这种) 从右往左 webpack采用方式

compose = (f,g) =>(args)=>f(g(..args))

通过一个例子验证loader的执行顺序

image.png

webpack-cli可以看下代码

##69讲 使用loader-runner高效进行loader的调试

loader-runner介绍

image.png

loader-runner的使用

image.png

开发一个raw-loader

image.png

使用loader-runner调试loader

image.png

70讲 更复杂的loader的开发场

loader的参数获取

image.png

loader异常处理 （同步的loader）

image.png

更多用this.callback方式

loader的异步处理

image.png

在loader中使用缓存

image.png

loader如何进行文件输出

image.png

71讲 实战开发一个自动合成雪碧图的loader

image.png

image.png

准备知识：如何将两张图片合成一张图片？

image.png

72讲 插件基本结构介绍

插件的运行环境

插件没有像loader那样的独立运行环境 只能在webpack里面运行

插件的基本结构

image.png

插件运行环境

image.png

开发一个最简单插件

image.png

73讲 更复杂的插件开发场景

插件中如何获取传递的参数

image.png

插件的错误处理

image.png

通过Compilation进行文件写入

image.png

应该是compiler.hooks 不是compiler.plugin

插件扩展：编写插件的插件

image.png

74讲 实战开发一个压缩构建资源为zip包的插件

image.png

准备知识：Node.js里面将文件压缩为zip包

image.png

复习：Compiler上负责文件生成的hooks

image.png

参考

程柳峰 极客时间 《玩转webpack》 第七章 68讲-74讲

avatar
文章
阅读
粉丝