老师好，看了这个file-loader，貌似实际开发时并不是所有图片都会由js引入，有好几种情况： 1、比如在html里用img的src引用图片，那么这个图片没有被js依赖到，按理就不会去打包输出这个图片。 2、比如在css中使用背景图去引用图片，而这个css是直接link在html内的，同样也不会去打包输出这个图片。唯独只有js内引用了css文件，才会去打包输出css，顺带把里面背景图引用到的图片输出而已。会有其他方法去处理这些情况吗？还是后面的章节会介绍到？感谢

作者回复: webpack 目前的打包入口只能是以 js 为入口的，暂时还不支持以 html 为入口进行打包，也就是 webpack 默认是不会分析 html 文件里面的依赖(比如 src=xxx 或者外部 css 中的语法)。可以看下这个 issue 的讨论：（https://github.com/webpack/webpack/issues/536）针对你说的这两个问题的处理办法是： 1. 比如在html里用img的src引用图片。解决办法：可以增加 html-loader 去处理 html，这样的话可以识别的了 img:src 这个属性。html-loader 提供了解析 html 里面的图片引入的能力 2. 通过 link 去引入的css里面的图片处理。解决办法：思路和 html-loader 比较像，可以去编写一个 loader 用于解析 html 的 link 语法，如果发现引入的是 css，那么对这个 css 的语法和里面的图片依赖进行解析，并且打包出一份新的 css 文件放到 dist 目录。

2019-05-30

3

14

欧罗巴皇

老师，内敛样式的图片怎么解析。还有图片如果要做懒加载，又应该怎么设置呢？

作者回复: 如果样式是一开始就内联的化，里面的图片是无法解析的。有两种办法可以解决： 1. 实现一个 loader，这个 loader 用于处理 html 文件，匹配里面的图片内容然后进行解析转换。 2. 样式一开始不要写成内联的方式，而是将样式以模块的方式引入进去，构建完成后再将生成的样式文件内联进 html 里面去。图片懒加载和构建无关，这个是 JS 层面的事情，当页面滚动到可视区的时候才将需要显示的图片 src 进行替换。

2019-08-14

3

4

Geek_Jason

老师，请问这里base64有什么好处呢？

作者回复: 减少http请求数，优化页面加载性能

2019-06-20



4

南

老师，你的code . 这个命令是干什么用的

作者回复: 这个是VSCode的快捷键，用于打开vscode

2019-07-03



3

MayO

在BUILD的时候有一行warning：WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. 在一般生产环境中用这种比较大的file一般webpack如何处理？一般lazy load怎么应用？

作者回复: 有几种办法： 1. 将大文件发布到cdn，以cdn 的方式引入，而不打入包中 2. 大的 file 通过 code split 分割后懒加载

2019-06-02



2

罗小黑

不知道哪里错了，图片没有转base64,下面是配置 { test: /\.(png|jpg|gif|jpeg)$/, use:[{ loader:'url-loader', options:{ limit:10240 } }] }

作者回复: 看这个构建配置是没问题的，看看你的图片大小是不是小于10k哈？如果图片大小没问题，可以把你的项目代码上传到 github上，发个链接我看下。

2019-09-01

2

1

Cris

url-loader底层也是基于file-loader的，那只装url-loader不装filder-loader行吗？

作者回复: 完全可以的

2019-07-16

3

1

study

file-loader和url-loader，区别在哪？或者说全用url-loader，有什么问题吗？

作者回复: 区别也介绍到了， url-loader 其实也是基于 file-loader，只不过 url-loader 多了可以自动设置小图片、字体 base64 内联到代码里面的功能。全部用 url-loader 也没问题

2019-06-10

2

1

Mavericker

正则匹配那里，应该是test: /\.(png|jpg|gif|jpeg)$/，缺了个转义字符

作者回复: 嗯嗯，感谢指出。相对来说影响也不大，后面更正下

2019-05-31

3

1

sherry慈

老师，您好。我在实际操作过程中发现file-loader不能解析ttf格式的字体文件，需要使用url-loader

作者回复: 可以解析的，你看看配置字体解析的时候有没有带上ttf后缀

2019-06-29





收起评论