webpack实战，手写loader和plugin

序言

对于 webpack 来说， loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢，单单止步于配置可能还不够。如果我们自己有时候想要 diy 一个需求，但是 webpack 又没有相关的 loader 和 plugin 。那这个时候我们可能就得开始造点轮子来供给自己使用了。

因此，在今天的文章当中，将带领大家手写一个简易的 loader 和 plugin ，并学会如何在项目中运用自己所编写的 loader 和 plugin 。

一起来学习吧~📢

一、如何编写一个Loader

1. 碎碎念

之前的文章中我们讲到了关于 loader 的一些配置。那如果把那些引用的 loader 改为我们写的 loader ，该怎么处理呢？

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

2. 项目结构

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

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

相关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(