Webpack预处理器loader

本章讲解Webpack预处理器loader，loader这个词也可以翻译成加载器。

在之前的入门一章我们已经介绍过Webpack的预处理器loader https://www.jiangruitao.com/webpack/loader/的使用，本章会对loader做进一步的讲解。

预处理器loader本质是一个函数，它接受一个资源模块，然后将其处理成Webpack核心能使用的形式。

本章会讲解loader的更多配置项和规则，例如exclude、include、resource和enforce等，通过这些配置项可以对打包进行一些优化以及满足我们的一些特殊业务需求。

在Webpack中，一切皆模块。Webpack在进行打包的时候，对所有引入的资源文件，都当作模块来处理。

现在的Webpack，自身可以处理JS和JSON文件模块，它无法理解其它类型的文件模块。

在入门一章我们已经学会用css-loader和style-loader这两个预处理器处理CSS模块。那么在遇到图片、字体和音视频等资源的时候，Webpack该如何处理这些模块呢？

Webpack提供了扩展loader的API，我们可以自己写一个loader来处理图片、字体和音视频等资源。

当然，Webpack社区已经有比较成熟的loader了，我们可以直接拿来使用。本章会介绍一些常见的loader的使用，例如file-loader和url-loader来处理图片等资源，babel-loader来对ES6转码，vue-loader来处理vue组件。

通过掌握社区这些常用的预处理器，可以使我们的开发效率更高，用户体验更好。

最后，我们会介绍在Webpack里如何开发一款自定义loader来满足我们的需求场景。loader本身是一个函数，开发一款自定义loader并不难。