webpack实战之手写一个简易的loader和plugin

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

🔔序言

对于 webpack 来讲， loader 和 plugin 能够算是需求程度最为普遍的配置项了。可是呢，单单止步于配置可能还不够。若是咱们本身有时候想要 diy 一个需求，可是 webpack 又没有相关的 loader 和 plugin 。那这个时候咱们可能就得开始造点轮子来供给本身使用了。

所以，在今天的文章当中，将带领你们手写一个简易的 loader 和 plugin ，并学会如何在项目中运用本身所编写的 loader 和 plugin 。

一块儿来学习吧~📢

🎵1、如何编写一个Loader

1. 碎碎念

以前的文章中咱们讲到了关于 loader 的一些配置。那若是把那些引用的 loader 改成咱们写的 loader ，该怎么处理呢？

如今，咱们来了解一下，如何手写一个简易的 loader ，并运用到咱们的项目当中。

2. 项目结构

首先用一张图，来看咱们的项目结构。以下图所示：

其中 loaders 文件夹下放置咱们想要写的 loader ，同时里面的 replaceLoader.js 文件放置咱们即将要写的 loader 的代码逻辑。以后，index.js 文件是咱们的入口文件，放置咱们的业务逻辑。 webpack.config.js 文件放置关于 webpack 的相关配置，而 dist 文件夹内的内容，放置的是咱们经过 webpack 打包后，生成的打包文件。

3. 业务代码编写

（1）入口文件代码

如今，咱们先来编写入口文件 index.js 的代码。具体代码以下：

console.log('hello monday');
复制代码

（2）编写loader

入口文件的内容很简单，咱们想要达到的目的就是输出 hello monday 这个语句。如今，咱们来编写 loader 的内容，已达到对入口文件 index.js 的内容进行修改。 replaceLoader.js 文件的代码具体以下：

module.exports = function(source) {
    const result = source.replace('monday', 'mondaylab');
    this.callback(null, result);
}
复制代码

---

以上的代码意思为，将入口文件 index.js 文件中的 monday 替换为 mondaylab 。这样写彷佛没啥问题，可是你们有没有想过，咱们有时候传的属性可能会很诡异，不必定每次都能像这样以字符串的形式来替换。

因此，咱们引用 webpack 官方推荐的 loadertils 这个工具，来解决这个问题。

第一步： 安装 loader-utils 插件。具体命令以下：

npm install loader-utils --save-dev
复制代码

第二步： 改造 loader 文件。接下来，咱们对 replaceLoader.js 文件进行改造升级，具体代码以下：

const loaderUtils = require('loader-utils');

//用function的缘由在于为了业务层能够调用this
//source为引入文件的源代码
module.exports = function(source) {
    //getOptions会自动地帮咱们分析this.query,而后把参数的全部内容放在options里面去
    const options = loaderUtils.getOptions(this);

    const result = source.replace('monday', options.name);

    this.callback(null, result);
}
复制代码

你们能够看到，经过使用 loaderUtils 插件，间接地，调用 getOptions 方法，来自动的帮咱们分析 this.query ，从而取到咱们想要的内容。

值得注意的是，咱们还须要再了解一下 this.callback 的内容。

通常状况下，若是咱们接收到了源代码 source ，那么如今咱们只能对源代码作处理。可是呢，有的时候，咱们想要使用一些 sourceMap ，或者对源代码分析好了以后，咱们不只想要返回源代码，还要把 sourceMap 也带回去。

由于咱们 return 的时候只能 return 一个参数，其他的一些额外的内容就带不出去了。这个时候呢，咱们就须要 this.callback 来帮咱们把 sourceMap 给带出去。所以，通常用 this.callback 来返回内容。

（3）引用loader

如今，咱们在 webpack.config.js 中，来引入咱们上面的 loader 。具体配置以下：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [{
            test: /\.js/,
            use: [
                {
                    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                    //上面的options.name中的name
                    options: {
                        name: 'mondaylab'
                    }
                }   
            ]
        }]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js' 
    }
}
复制代码

经过以上方式，咱们写了一个简易的 loader ，这个 loader 实现了将 monday 替换为 mondaylab 的功能。而且供咱们在 webpack 中使用本身书写的 loader 。

（4）在loader里面作一些异步的操做

好了如今，若是咱们想要给 loader 作一些异步操做，该怎么实现呢？

在咱们所写的 loader 当中，加入异步操做，那么咱们须要调用官方提供给咱们的 this.async() 这个 API 来实现。如今，咱们来改造一下 replaceLoader.js 文件的代码。具体代码以下：

const loaderUtils = require('loader-utils');

module.exports = function(source) {

    const options = loaderUtils.getOptions(this);
    //调用this.async()这个API，来给异步代码使用
    const callback = this.async();

    setTimeout(() => {
        const result = source.replace('monday', options.name);
        callback(null, result);
    }, 1000);
}
复制代码

经过这种方式，咱们就能够在 loader 中编写异步代码，来达到咱们想要的效果。

（5）loader路径自定义

有一个很小的注意点就是，当咱们在配置 webpack.config.js 文件中， loader 的路径时，每回都要 path.resolve 去寻找路径文件。文件少的时候还好，但若是遇到多文件的时候呢？岂不是会很麻烦。

因此，咱们引用 resolveLoader 来简化它。如今咱们在 webpack.config.js 文件中进行改造。具体配置以下：

const path = require('path');

module.exports = {
    // 先到node_modules中去找，找不到则去./loaders目录下去找
    resolveLoader: {
        modules: ['node_modules', './loaders']
    },
    module: {
        rules: [{
            test: /\.js/,
            use: [
                {
                    loader: 'replaceLoader'
                }
            ]
        }]
    }
}
复制代码

经过配置 resolveLoader ，来对文件文件目录进行查找，从而简化了路径内容。

🎶2、如何编写一个Plugin

1. 碎碎念

在讲解 plugin 以前，咱们先来了解 loader 和 plugin 的区别。

当咱们在源代码里面，去引入一个新的 js 文件，或者是一个其余格式的文件时，这个时候咱们能够借用 loader ，来帮咱们处理咱们引用的 loader 文件。 loader 的做用就在于，帮助咱们处理引用的模块。

而 plugin 呢，是当咱们在作打包的时候，在某些具体时刻上，好比说，当咱们打包结束以后，咱们要生成一个 html 文件，这个时候，咱们就可使用一个 htmlWebpackPlugin 的插件。使用它以后，他就会在打包结束以后，帮咱们生成对应的 html 文件。

再好比，咱们要在打包以前，把 dist 目录进行清空，这个时候咱们就可使用 cleanWebpackPlugin 来帮助咱们作这件事情。

因此， plugin 插件，在何时生效呢？

它在咱们打包过程当中的某些时刻里，就是插件生效的场景。

plugin 的编写相对于 loader 来讲，会难一点点。可是呢，若是有看过 webpack 源码的小伙伴们可能会知道， webpack 的一些底层原理都是依据 plugin 来进行编写的。因此，咱们仍是有必要来学习一下 plugin 的编写。

下面就带领你们来编写一个简易的 plugin ~

2. 项目结构

对于 webpack 的 plugin 来讲，它是是基于发布者订阅的设计模式，也能够说是基于事件驱动来实现的。在这个事件驱动里，代码之间的执行，是经过事件来进行驱动的。

接下来，咱们就来写一个简易的 plugin 。

首先用一张图，来看咱们的项目结构。以下图所示：

其中 plugins 文件夹下放置咱们想要写的 plugin ，同时里面的 copyright-webpack-plugin.js 文件放置咱们即将要写的 plugin 的代码逻辑。以后，index.js 文件是咱们的入口文件，放置咱们的业务逻辑。 webpack.config.js 文件放置关于 webpack 的相关配置，而 dist 文件夹内的内容，放置的是咱们经过 webpack 打包后，生成的打包文件。

3. 业务代码编写

（1）入口文件代码

如今，咱们先来编写入口文件 index.js 的代码。具体代码以下：

console.log('hello monday');
复制代码

（2）编写plugin

如今，咱们来编写 plugin 的内容， copyright-webpack-plugin.js 文件的代码具体以下：

class CopyrightWebpackPlugin {
    //编写一个构造器
    constructor(options) {
         console.log(options)
     }

    apply(compiler) {
        //遇到同步时刻
        compiler.hooks.compile.tap('CopyrightWebpackPlugin',() => {
            console.log('compiler');
        });
		
        //遇到异步时刻
        //当要把代码放到dist目录以前，要走下面这个函数
        //Compilation存放打包的全部内容，Compilation.assets放置生成的内容
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (Compilation, cb) => {
            debugger;
            // 往代码中增长一个文件，copyright.txt
            Compilation.assets['copyright.txt'] = {
                source: function() {
                    return 'copyright by monday';
                },
                size: function() {
                    return 19;
                }
            };
            cb();
        })
    }
}

module.exports = CopyrightWebpackPlugin;
复制代码

上面的这个插件中想要实现的功能就是，获取版权信息。

（3）引用plugin

如今，咱们在 webpack.config.js 中，来引入咱们上面的 plugin 。具体配置以下：

const path = require('path');
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: { 
        main: './src/index.js'
    },
    plugins: [
        new CopyrightWebpackPlugin({
            name: 'monday'
        })
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}
复制代码

经过上述代码，咱们能够了解到，在（2）中，咱们首先须要定义一个类，以后呢，在类中写一个构造器和一个 apply() 方法来调用。而后呢，你们看到（3），经过 require 的方式，来进行 new 实例 ，实例化一个插件，从而在项目中使用这个插件。

最终，咱们项目进行打包时，就会生成一个 dist 目录，而且在目录下增长一个 copyright.txt 文件，而且文件中的内容就是 copyright by monday 。

💹3、结束语

在上面的文章中，讲解了关于loader和plugin的基本编写思路，以及如何在项目中对他们进行运用，相信你们对这一块内容有了基础的认识。

到这里，loader和plugin的编写讲解就结束啦！但愿对你们有帮助~

如文章有误或有不理解的地方，欢迎小伙伴们评论区留言哦💬

本系列文章代码已上传至公众号，后台回复关键词 webpack 便可获取~

🐣彩蛋 One More Thing

（：往期推荐

webpack入门核心知识👉万字总结webpack的超入门核心知识

webpack入门进阶知识👉万字总结webpack入门进阶知识

webpack实战案例配置👉万字总结webpack实战案例配置

（：番外篇

• 关注公众号星期一研究室，第一时间关注优质文章，更多精选专栏待你解锁~

• 若是这篇文章对你有用，记得留个脚印jio再走哦~

• 以上就是本文的所有内容！咱们下期见！👋👋👋