阅读 185

webpack 的 loader 和 plugin 你真的弄懂了吗

为什么需要 webpack?

随着现代前端项目的不断发展,有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法。
  • 模块化:可以把复杂的程序细化为小的文件;

  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别

  • Scss,less等CSS预处理器

模块化后网页中引入的静态资源多了以后有什么问题?

  • 网页加载速度慢,因为我们要发起很多的二次请求;

  • 要处理错综复杂的依赖关系。

浏览器不能直接识别TypeScript,scss,less等语法怎么办?

这个时候,webpack登场了。WebPack可以看做是**模块打包机**:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

webpack 中的 loader 与 plugin

提到 webpack,自然离不开 loader 与 blugin。Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果(loader)。这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。而插件(plugin)就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。
  • Loader:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在build中引入这些依赖。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript。
  • Plugin:目的在于解决loader无法实现的其他事,从打包优化和压缩,到重新定义环境变量,功能强大到可以用来处理各种各样的任务。
简而言之,loader可以理解成webpack的横向广度,有了loader,webpack才可以打包处理各种的扩展语言。而plugin可以理解为webpack的纵向深度,在生命周期内注入不同的插件来扩展更多的能力。

Loader 的原理与实现

Loader 就像是一个翻译官,每个 loader 可以把源资源转换成新的结果输出并传递给下一个 loader ,但是最后一个 Loader 必须返回 JavaScript (浏览器只能运行js代码,不支持其他扩展语言)。

以处理less文件为例:
module:{ 
    rules: [  
        {    
            test: /\.less$/,    
            use: ['style-loader', 'css-loader', 'less-loader']  
        } 
    ]
}
复制代码
  • less-loader: 将 less 源代码转化为 css
  • css-loader:处理 less-loader 输出的 css,找出 css 中依赖的资源(@import 等),压缩资源
  • sytle-loader:处理 css-loader 输出的 css,把 css 转换成脚本加载的 js 代码插入到 DOM 中
至于 loader 的解析顺序为什么是**从右向左**的,原因其实只是Webpack选择了compose函数式变成方式,而不是pipe的方式而已。(具体的内容就不在这里赘述了,感兴趣的同学可以去了解下函数式编程中的组合与管道)
  • 那么如何实现一个loader呢?

有一天我们想把项目 txt 文件中的蒋梨花全部替换为梨花酱,这个时候就可以通过loader来解决

1) 在config.js中配置项目中 .txt 结尾的文件使用我们的 demo-loader

// webpack.config.js
module:{  
    rules: [    
        {        
            test: /\.txt$/,        
            use: ['demo-loader'],        
            options: {            
                name: '梨花酱' // 将要变更的通过配置项传入        
            }      
        }  
    ]
}
复制代码
2)创建一个包含蒋梨花的txt文件,并引用(webpack不会处理未引用的文件)
// test.txt
你好,我是蒋梨花
// app.js (入口文件引用)
const text = require(./text.txt)
console.log(test)
复制代码
3) 编写 loader
// demo-loader.js
const loaderUtils = require('loader-utils') 
// 接收options配置
module.exports = function(source) {    
    const options = loaderUtils.getOptions(this)    
    source = source.replace(/蒋梨花/g, options.name)    
    return `module.exports = ${JSON.stringify(sorce)}`    
    // 最终需要返回一段可执行的js脚本
}
复制代码
4) 执行一下,就会发现 txt 文件中的蒋梨花已经被替换为梨花酱了~
Tips: 在实现一个 loader 的时候,要牢记几个原则哦:**单一职责;链式组合;模块化;无状态**

Plugin 的原理与实现

plugin是运行在webpak打包过程中的某段逻辑,它主要的作用是根据webpack提供的一些hooks来进行一些额外的操作,使 webpack 更加灵活扩展。

plugins: [    
    new HtmlWebpackPlugin()  
]
复制代码
我们通过 new 来使用这个插件,可以看出插件的本质是一个构造函数。
首先了解两个概念:Compiler 和Compilation

compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置,包括 options,loader 和 plugin。当在 webpack 环境中应用一个插件时,插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。

compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时,每当检测到一个文件变化,就会创建一个新的 compilation,从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调,以供插件做自定义处理时选择使用。

在 webpack 启动后,它会执行 new xxxPlugin(options) 来初始化插件实例。在初始化对象后,会去调用 xxxPlugin.apply(compiler) 并传入 compiler 对象。插件获得 compiler 对象后,可以通过
compiler.plugin('事件名', 回调函数) 的方式进行监听 webpack 广播出来的事件了。
  • 那么具体如何实现一个 plugin 呢?

让我们来实现一个在文件中添加一段文字的功能插件:
1) 在配置文件中,使用插件
// webpack.config.js   
plugins: [    
  new MyTestPlugin({       
    msg: '你好我是梨花酱' // 传入的插件配置    
  })
]
复制代码
2)编写 plugin 插件
// MyTestPlugin.js
const { ConcatSource } = require("webpack-sources") // 用来写入
class MyBannerPlugin {  
    constructor(options) { 
        // 获取传入的option信息    
        this.msg = options.msg  
    },  // 我们需要一个apply方法(为了获取compiler),接收compiler作为参数表示这次打包的上下文。  
    apply (compiler) {    
        const msg = this. msg    // 指定挂载的 webpack 钩子函数    
        // 使用compiler钩子compilation,即编译(compilation)创建之后,执行插件。    
        compiler.hooks.compilation.tap("MyTestPlugin", compilation => {      
        // compilation的 optimizeChunkAssets 钩子,可以利用这个钩子实现为每个文件插入信息      
            compilation.hooks.optimizeChunkAssets.tap("MyTestPlugin", chunks => {        
                for (const chunk of chunks) {          
                    for (const file of chunk.files) {            
                        compilation.updateAsset(file, old => {                       
                            return new ConcatSource(msg,"\n", old);            
                        });          
                    }        
                }      
            })    
        })  
    }
}
module.exports = MyTestPlugin
复制代码
可以看出,要实现一个plugin需要以下几步:
  • 首先需要声明一个 class 构造函数

  • 在class里面定义一个apply方法,接收compiler作为参数表示这次打包的上下文。

  • 指定挂载的webpack事件钩子

  • 处理webpack内部实例的特定数据

  • 功能完成后调用webpack提供的回调

具体的 compiler 钩子 和 compilation 钩子可以参考官方文档:[https://www.webpackjs.com/api/compilation-hooks/#optimizechunkassets](https://www.webpackjs.com/api/compilation-hooks/#optimizechunkassets)