本文探讨了Webpack处理不同资源类型的方法，包括url-loader、file-loader、image-webpack-loader等插件的应用，解决直接在HTML中使用style标签的问题，以及如何处理和压缩图片资源。同时，介绍了html-loader和html-withimg-loader的区别，以及使用webpack-spritesmith生成精灵图的技巧。
未解之谜：好像没有办法可以处理直接写在html文件中的style标签的样式？比如怎么也获取不到style标签里的背景图片资源的之类的。。
- url-loader & file-loader：处理css文件中的图片资源
url-loader可以把符合limit条件的图片转为base64字符串，其他的使用file-loader打包（生成蛋文件，返回的是使用http请求的url）。url-loader中封装了file-loader，使用时两个都需要npm install。
- image-webpack-loader配合url-loader压缩图片
遇到了一个bug：npm install image-webpack-loader -D 之后配置压缩项，打包构建总是报错（Module build failed . Error: Cannot find module 'imagemin-gifsicle'...）
uninstall之后改用cnpm重新下载就神奇的好了...
- html-loader / html-withimg-loader：处理html中直接引入的img图片资源（区别？）
- 使用webpack-spritesmith把小图标icon生成精灵图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
