如何在webpack4中编写加载程序

之前学过webpack3的知识，但是在webpack4升级后还是有很多变化，所以这次我会重新整理webpack4的知识点，以备以后复习。

这次对webpack4的学习不仅需要知道如何配置和记忆核心API，还需要了解webpack更深层次的知识，比如打包原理，所以可能会省略一些基本内容，但希望通过这次学习能够掌握webpack，更好地应对以后的工作。

1.写入门级加载程序

在前一篇文章中，我已经基本上浏览了webpack的基本内容，现在我准备从loader开始复习webpack的高级知识。

首先初始化一个项目

Npm初始化然后安装依赖项

创建一个src目录，在其中创建一个index.js

创建一个新的webpack.config.js并编写最基本的配置

这时候如果有需求，需要在包装过程中用mark替换world，可以用loader来实现。首先，在src对等目录中创建新的loader文件夹，并在其中创建一个新的replaceLoader.js。

ReplaceLoader.js需要导出一个函数。注意：这个函数不能是一个箭头函数，因为当webpack调用loader时，这个函数会被改变，而且它上面有一些方法。如果使用箭头函数，这种指向会有问题，并且没有办法在这上面调用一些方法。

函数可以接受一个参数，而这个参数就是我们源代码的内容，所以我们可以在操作源代码之后，通过返回源代码来改变源代码。

然后使用我们自己的加载器，并且使用的时候不会填写加载器名称，而是需要写我们加载器的路径。

就这样，我们打包之后，发现世界已经被马克取代了，于是我们实现了一个最简单的加载器。

2.为加载程序配置参数

Loader经常可以配置一些参数，那么如果要配置参数，应该怎么做呢？

此时，在replaceLoader中，可以通过这个. query来访问参数.

以这种方式打包后，结果将被我们的参数替换，但是官方建议我们使用loader-utils来传递参数。

cnpm安装-保存-开发加载程序-实用程序

这个打包的结果也是我们传入的参数。

3.this .回调

有时我们不仅需要返回一个资源，还需要返回多个结果，所以我们需要使用回调。

this.callback(err:错误| null，content:字符串| Buffer，sourceMap？ SourceMap，meta？任何)；第一个参数是error，第二个是result，第三个是sourcemap，第四个可以是任何东西(比如元数据)

4.这个. async

在loader中，如果直接调用setTimeout，会报错，那么如果要做异步操作，应该怎么做呢？

当您想要使用异步时，您需要先将回调更改为this.callback，然后返回结果(就像这样)。

这样，重新包装就没有问题了。

额外的知识点：当我们现在配置loader时，我们需要使用path.resolve有没有办法像其他的loader一样引用它？

这样，只需写加载器名称，webpack就会先在node_modules中查找，如果找不到，就转到当前目录中的加载器。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。