webpack从0到手写webpack_05

Loader是什么？

webpack是一个模块打包工具，可以打包js，css，图片等资源
我们在demo02的文件夹中引入一张图片

// 图片资源 图片资源 图片资源
http://www.dell-lee.com/imgs/avatar.jpg

下载之后放到src中
在 index.js中导入这个张图片，并在终端运行打包命令

npm run bundle

这个时候发现打包就报错了，他说图片出了问题，模块解析失败。webpack默认知道如何打包js文件，但是它不知道如何打包图片文件。
因此我们就要告诉webpack怎么办？因此在配置文件中继续编写我们的配置文件。
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源，我们打包图片资源就需要用到file-loader

现在要用到file-loader 但是我们并没有安装file-loader这个工具

cnpm install file-loader -D

在执行打包命令，成功打包

dist目录中就有两个文件，多了一个图片资源。所以webpack也会把图片打包到dist目录中去

我们在index.js中输出以下我们引入的图片资源，打包运行html文件

输出的是一个module，里面存放的是我们的图片资源路径

如果用的webpack4打包，输出的是文件名

file-loader底层帮我们做了几件事情：

当它发现我们代码中引入了图片这样的模块的时候，首先帮你打包会把这个图片移动到dist目录下，会得到图片相对dist目录的名称然后会把这个名称作为返回值，返回到引入模块的变量（avatar）之中。当然不仅仅能处理jpg这样的文件，理论上可以处理任何静态的资源

讲到这里其实我们的重点不是讲file-loader，我们重点是loader到底是什么。其实loader就是一个打包的方案，它知道对于特定的文件webpack应该知道如何进行打包，webpack对于不能处理的文件，求助于loader就可以了

此时我们改写一下代码

修改index.js代码如下，同时删除模块文件

有时候写vue的项目的时候，

那这个时候你就需要使用vue-loader,webpack配置文件就需要添加新的配置，并下载

cnpm install vue-loader -D

当你看见你要打包的文件如果不是js结尾，首先想到要使用loader了