- 标清
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.5x
玩转webpack
精选留言(20)
- 2019-05-30老师好，看了这个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 目录。 1 4 
2019-08-14老师，内敛样式的图片怎么解析。还有图片如果要做懒加载，又应该怎么设置呢？作者回复: 如果样式是一开始就内联的化，里面的图片是无法解析的。有两种办法可以解决：
1. 实现一个 loader，这个 loader 用于处理 html 文件，匹配里面的图片内容然后进行解析转换。
2. 样式一开始不要写成内联的方式，而是将样式以模块的方式引入进去，构建完成后再将生成的样式文件内联进 html 里面去。
图片懒加载和构建无关，这个是 JS 层面的事情，当页面滚动到可视区的时候才将需要显示的图片 src 进行替换。 2 1
2019-07-03老师，你的code . 这个命令是干什么用的作者回复: 这个是VSCode的快捷键，用于打开vscode
1
2019-06-25老师，我的build完成后，在dist目录下生成了字体文件，能不能不让它出现或者出现在别的目录里 1
2019-06-06后来把html和js放在同级目录下就可以正常显示图片了，请问为什么html位置不同会影响图片显示呢？ 3 1
2019-06-05图片无法显示路径错误的，确认一下html文件和生成的js文件是否是同级 1
2019-09-17老师，为什么我按照less的方式来解析sass一直报错呢
2019-09-01不知道哪里错了，图片没有转base64,下面是配置
{
test: /\.(png|jpg|gif|jpeg)$/,
use:[{
loader:'url-loader',
options:{
limit:10240
}
}]
}展开作者回复: 看这个构建配置是没问题的，看看你的图片大小是不是小于10k哈？
如果图片大小没问题，可以把你的项目代码上传到 github上，发个链接我看下。 1
2019-08-08Url-loader读取图片超出设定上限时，默认使用file-loader作为fallback，也可以手动指定其他的解析图片的方式
2019-07-16url-loader底层也是基于file-loader的，那只装url-loader不装filder-loader行吗？作者回复: 完全可以的
1
2019-07-09老师, .otf 的字体format也可以使用 truetype吗
2019-06-29老师，您好。我在实际操作过程中发现file-loader不能解析ttf格式的字体文件，需要使用url-loader作者回复: 可以解析的，你看看配置字体解析的时候有没有带上ttf后缀
- 2019-06-20老师，请问这里base64有什么好处呢？
作者回复: 减少http请求数，优化页面加载性能
2019-06-12@Chen html中script脚本引用js文件的路径是./，要求两个文件在同一级目录下，位置不对的话script脚本找不到js文件,自然也没办法显示- 2019-06-10file-loader和url-loader，区别在哪？或者说全用url-loader，有什么问题吗？
作者回复: 区别也介绍到了， url-loader 其实也是基于 file-loader，只不过 url-loader 多了可以自动设置小图片、字体 base64 内联到代码里面的功能。
全部用 url-loader 也没问题 1 - 2019-06-06npm run build 运行无报错，而且显示图片路径了，但是运行起来html还是无法显示图片
2019-06-04老师，能否讲讲设置路径的问题？
我按照上面操作，最终图片没有显示出来。评论好像也不能放置截图 1
2019-06-02在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-05-31正则匹配那里， 应该是test: /\.(png|jpg|gif|jpeg)$/，缺了个转义字符作者回复: 嗯嗯，感谢指出。相对来说影响也不大，后面更正下
2019-05-30file-loader test正则那里的 . 号是不是缺少了转义字符？作者回复: 嗯嗯，是的，最好前面加一个 斜杠(\)转义字符