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)