全面掌握Webpack4.0 (四)什么是loader（持续更新…

前言

通过前几章的学习我想大家已经知道了webpack到底是用来做什么的，是的，webapck是一个静态资源的打包工具，我们在之前的demo中已经对js文件进行了打包并且成功的输出了内容，此时我想提一个新的需求，我想在页面中添加一张图片，那么webpack可以对图片文件进行正确的打包吗？

如下图所示，我在src文件夹中添加了一张名为demo.png的图片：

在index.js中导入这张图片并添加到页面中，新增代码如下图：

在终端对项目进行打包，此时我们发现有报错：

如上图所示，我们发现报了一个和图片相关的错误，这是为什么呢？

报错的原因其实就是webpack默认只认识js文件，不认识其他类型的文件，所以此时会报错。

既然webpack默认不认识图片类型的文件，那我们就通过配置让它认识认识，此时我们就需要loder来对非js文件进行一个处理，loder闪亮登场！ loder闪亮登场！ loder闪亮登场
我们先来看一下webapck官网对loader的解释：

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

说到这儿，大家应该知道loader是用来做什么的了吧，下面给大家讲一下如何使用loader。处理不同类型的文件所需的loader是不同的，这里先给大家介绍一个用于处理图片文件的loader，叫做“file-
loader”。
首先，我们要安装这个file-loader：
在终端使用命令：npm install file-loader -D进行安装
查看package.json文件，发现file-loader已经安装成功：

然后我们要做的就是在webpack.config.js中配置loader,如下图所示：

配置项参数解释：
module：模块对象，配置的loader要写在module对象里
rules：配置规则，是一个数组，可以在里面配置多个loader
test：正则表达式，用于匹配你想用loader处理的文件类型
use：对应的test所需要使用的loader

此时我们重新在终端对项目进行打包：

打包成功！
我们此时打开浏览器，发现实例图片demo.png加载成功了。


此时我们打开dist文件夹，会发现dist文件夹中除了出口文件bundle.js文件之外还多出了一个名字很长的.png文件，其实这个就是demo.png，只不过是打包过程中被webpack重命名了而已。说到这里我们可以看到，对于图片类型的文件，使用file-loader可以对其进行处理，打包之后会将源文件打包到dist文件夹中供index.html使用。（补充说明：打包后的这个很长串的图片名是可以通过配置进行自定义的，我们以后会讲到）

讲到这里我想大家已经对loader是什么有了一个很深刻的认识了，我在文中提到过处理不同类型的文件需要使用不同的loader，本文中为了给大家讲明白loader是什么的同时给大家讲了一个file-loader的安装以及使用配置作为举例，在下面的章节中会给大家讲一些我们在实际开发中非常常用的loader们的使用配置,例如处理.css文件需要什么loader？处理.Scss文件需要什么loader？以及处理.svg文件需要什么loader等等等等，本文终。

下一篇：全面掌握Webpack4.0 (五)使用loader打包静态资源（图片篇）（持续更新…

标签：文件,更新,loader,webpack,file,Webpack4.0,js,打包
来源： https://blog.csdn.net/weixin_40285008/article/details/110623195