持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

path

在配置文件中使用loader,需要使用node核心模块path来处理

给loader配置参数如下：

loader接受参数，this.query、loader-utils

那loader如何接受参数呢？
可用：

1. this.query
2. loader-utils
   在loader的js中文件中去接受参数，现进入我自己写的一个替换字符串的一个loader文件。
   myLoaders/replace-loader.js:

loader-utils是官方推荐处理loader,query的工具，可以通过this.query来接受配置文件传递进来的参数。
source是源代码。比如src/index.js是个入口文件，那么sourse就是这个入口文件里面的所有代码。
也可以用loader-utils拿到loader配置里面的options,也就是也能拿到参数，最后把源代码dource里面的代码hello替换成配置里面的name,也就是我们webpack.config.js里loader配置里面的option下面的name 。

看一下其他文件代码，dist/index.html 是展示效果的，src/index.js是被操作的入口文件。 dist/index.html:

src/index.js:

这里是把index.js里面的hello替换成了loader配置下面的name值"浅唱"，正常的话，回到打印出“浅唱 浅唱” ，看效果：

this.callback

可以返回多个信息

之前用的return 一次只能返回一个信息，返回多个信息会很不方便，this.callback就可以一次性返回多个信息，方便。

this.async

处理loader里面有异步的情况。

加了个setTimeout造成异步，里面用return 返回数据时，发现会报错。怎么解决呢？

就用到了this.async,因为this.async会返回this.callback。

里面定义一个异步处理，告诉webapck,这个loader里有异步事件，在里面调用下这个异步，里面的callback就是this.callback。 执行一下构建：

再看下打印效果：

ok的。

多个loader的使用

myLoaders/replace-loader.js:

myLoaders/async-replace-loader.js:

多个loader使用的时候，我们每个的loader的配置项放在数组里面，每个laoder各写各的，各子配置各子的，互不影响，如下：
webpack.config.js:

再看一下运行结果：

处理loader的路径问题

我们之前在配置里面写loader路径的时候，大家有没有发现很繁琐，代码也长，冗余。

我们可以使用resolveLoader下的modules进行简化配置，然后loader原来需要路径的地方只要写个文件名就可以啦，具体如下：

是不是简化很多呢。
运行结果：

成功的。