webpack 从入门到放弃！( 三 ) _webpack中文文档

即便是通过 JS 代码去加载的 CSS 模块，css- 和 style- 仍然可以正常工作。因为在打包过程中会循环遍历每个模块，然后根据配置将每个遇到的模块交给对应的去处理，最后再将处理完的结果打包到一起。
其实不仅是建议我们在中引入 CSS，还会建议我们在代码中引入当前业务所需要的任意资源文件。因为真正需要这个资源的并不是整个应用，而是你此时正在编写的代码。这就是的设计哲学。
可能你乍一想好像不太容易理解，那你可以做一个假设：假设我们在开发页面上的某个局部功能时，需要用到一个样式模块和一个图片文件。如果你还是将这些资源文件单独引入到 HTML 中，然后再到 JS 中添加对应的逻辑代码。试想一下，如果后期这个局部功能不用了，你就需要同时删除 JS 中的代码和 HTML 中的资源文件引入，也就是同时需要维护这两条线。而如果你遵照的这种设计，所有资源的加载都是由 JS 代码控制，后期也就只需要维护 JS 代码这一条线了。
所以说，通过代码去引入资源文件，或者说是建立和资源文件的依赖关系，具有明显的优势。因为代码本身负责完成整个应用的业务功能，放大来说就是驱动了整个前端应用，而代码在实现业务功能的过程中需要用到样式、图片等资源文件。如果建立这种依赖关系：
常见的
目前社区提供了非常多的资源加载器，基本上你能想到的需求都有对应的。
名称描述链接
style-
将css-转换后的结果，通过style标签的方式追加到页面中
css-
将css文件转换为js模块
file-
把文件输出到一个文件夹中，在代码中通过相对URL去引用输出文件
url-
和file-类似，但是能在文件很小的情况下以的方式把文件内容注入到代码中去
-map-
加载额外的 Map文件，以方便断点调试
image-
加载并且压缩图片文件
babel-
把ES6转换成ES5
-
通过检查代码
sass-
加载 Sass/SCSS 文件并将其编译为 CSS
-
处理 CSS 的加载器
vue-
Vue 单文件组件的加载器
上述大体分为三类：
::: tip
注意：在中，的执行顺序是从右向左执行的，因为选择了这样的函数式编程方式，这种方式的表达式执行时从右向左的。
:::
文件资源加载器
大多数加载器都类似于css-，都是将资源模块转换为JS代码的实现方式去工作，但是还有一些我们常用的资源文件，例如项目当中的图片或字体，这些文件无法通过JS的方式去表示，对于这类的资源文件，我们需要用到文件资源加载器，也就是file- 。
{test: /.png$/,use: 'file-loader'}
在打包时遇到了图片文件，然后根据配置文件的配置，找到文件加载器，文件加载器先是将导入的文件拷贝到输出的目录，然后将文件拷贝到输出目录后的路径作为当前模块的返回值返回，对于应用来说需要的资源就被发布出来了，通过模块的导出成员拿到资源的访问路径。
除了file-这种拷贝物理文件的形式处理资源以外，还有一种通过Data URLs的形式去表示文件。Data URLs是一种特殊的URL协议，它可以用来直接去表示一个文件，传统的url需要服务器上有一个对应的文件，然后通过请求地址得到服务器上的这个文件。而Data URLs是一种当前可以直接表示文件内容的一种方式。
所以这种url当中的文本已经包含了文件的内容，那么我们在访问这种url的时候不会发送任何的http请求。例如data:text/html;=UTF-8,html，但是像图片和字体这种无法通过文本表示的二进制文件，可以通过将其编码，以编码结果字符串表示内容data:image/png;,... 。在打包静态资源是也可以使用这种方式去实现，使用Data URLs表示任何类型的文件了，这时我们需要一个专门的加载器url- 。