我们先来创建一个项目
mkdir make-loader // 创建一个文件夹
npm init -y //初始化项目，生成package.json文件，package.json记录项目的信息，以及依赖包
mkdir src //根目录下创建src文件夹，并写入任意代码
npm install webpack webpack-cli --save-dev // 安装 webpack
touch webpack.config.js // 创建webpack配置文件并配置
image.png
webpack初始配置如下
image.png
如果我们希望在引入一个JS文件的时候，遇到代码里的Hello，就把它变为Hello World，这个时候我们就可以通过一个loader来进行修改
-
首先，我们index.js里的代码是这样的
image.png - 我们希望打包过后，生成的main.js里是 console.log('Hello World')，这个时候我们可以编写一个loader,loader本质上就是一个函数，而且不能写箭头函数，必须是声明式的函数，因为webpack在调用loader的时候，会把laoder函数里的this指向做一个变更，之后才可以用this里的一些方法，如果写成箭头函数，this指向就会有问题，就没办法使用本来属于this的一些方法了。方法接受一个参数
source,这个参数就是引入文件的源代码，拿到引入文件的内容进行处理后再return出去
image.png -
写好loader之后怎么用？注意调用自己在目录内写的loader的时候，要写绝对路径。而不是单纯的loader名
image.png - 配置 好以后，我们再去打包，我们编写的laoder会对src下的index.js代码进行分析处理。代码里打印的
Hello，变为了Hello World
image.png -
我们可以把这个loader写的再复杂一些
image.png - 传递的参数，在loader里，可以通过
this.query来获取
image.png - 然后
Hello就被替换成了everyone
image.png
当然，有的时候，我们配置的参数可能比较诡异，我们取参数的时候直接用this.query不是很方便。这个时候我们用webpack推荐的loader-utils这样一个模块，帮我们分析一些内容。我们打开webpack官网，API下的
image.png
具体步骤如下
- 安装
loader-utils
npm install loader-utils --save-dev
- 安装好以后，通过node的方式引入，
loader-utils会调用getOptions方法，并且把this传进去，帮我们分析this.query
image.png -
我们再打包，结果是一样的。
image.png
如果我们想在loader里，除了把处理后的源代码传递出去，还要把sourceMap，或者其他的东西一起传递出去，这个时候 return就不用了。我们需要this.callback方法
image.png
-
我们用this.callback方法代替return
image.png -
再次打包，结果是一样的
image.png
如果我们在loader里要进行一些异步的操作，比如下边这样
image.png
-
延迟一秒钟后，把编译结果返回，这个时候，如果打包会报错
image.png - 原因是，当我们去引入一个文件的时候，loader代码从上到下执行，而setTimeout里的代码，要1秒后才会执行，所以我们一开始打包执行loader的时候，并没用return结果出去，这个时候就会报错
如果我们想要在loader里写一些异步的东西，我们该怎么处理呢？
-
我们要调用
this.async
image.png -
代码里我们这样写
image.png -
我们再次打包，结果没边
image.png
image.png -
如果我们把定时器事件改为5000
image.png -
再次打包，打包耗时将会超过5秒
image.png
假如，我们现在不单单有刚才的异步loader,还有一个同步的loader,我们想达成的目标是，通过异步loader把Hello变成everyone,然后再通过同步的loader,把everyone替换成 hello everyone,这种多个loader的情况，我们该怎么办呢？
-
首先我们创建在
loaders文件夹下再创建一个loader,名字叫replaceLoaderAsync
image.png -
然后我们把原来的
replaceLoader代码改为
image.png -
然后，我们再去配置
webpack.config.js
image.png -
我们再运行打包，是我们想要的结果
image.png
平时我们引用loader都是像下边这样写的，并不是加path.resolve(xxxx)
image.png
-
但是这样写之后，肯定是不好用的，因为loader会到node_modules里去找，而不会到我们自己写的
loaders文件夹里去找
image.png -
这个时候，我们可以借助
webpack的参数resolveLoaders,这个参数resolveLoaders会帮我们在引入loader的时候干一些事情
image.png -
这样配置的意思是，当我们引入一个loader的时候，它会先到node_modules里去找，看有没有，如果没有再到loaders里去找，如果loaders有对应的loader,它就会用对应的loader帮我们解析文件，配置好后，我们再打包，没问题
image.png
