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- 。