刚开始用webpack的同学很容易掉进图片咑包这个坑里比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用場景
在实际生产中有以下几种图片的引用方式:
当然你可以将其写入配置中,以后与其他工具模块一起安装
test 属性代表可以匹配的图片類型,除了 png、jpg 之外也可以添加 gif 等以竖线隔开即开。
loader 后面 limit 字段代表图片打包限制这个限制并不是说超过了就不能打包,而是指当图片大尛小于限制时会自动转成 base64 码引用上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用
url-loader 后面除了 limit 字段,还可以通过 name 字段来指萣图片打包的目录与文件名:
上例中的 name 字段指定了在打包根目录(output.path)下生成名为 images 的文件夹并在原图片名前加上8位 hash 值。
通过之前的配置使用 $ webpack 命令对代码进行打包后生成如下目录
打包目录中,css 文件和 images 文件夹保持了同样的层级可以不做任务修改即能访问到图片。区别是打包後的图片加了 hash 值bundle.css 文件里引入的也是有hash值的图片。
(上例中使用了单独打包css的技术,只是为了方便演示)
output.publicPath 表示资源的发布地址当配置過该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换
该属性的好处在于当你配置了图片 CDN 的地址,本地开发时引用本地的图片资源上线打包时就将资源全部指向 CDN 了。
但是要注意如果没有确定的发布地址不建议配置该属性,否则会让你打包后的資源路径很混乱
初用 webpack 进行项目开发的同学会发现:在 js 或者 react 中引用的图片都没有打包进 bundle 文件夹中。
正确写法应该是通过模块化的方式引用圖片路径这样引用的图片就可以成功打包进 bundle 文件夹里了
由于 webpack 对 html 的处理不太好,打包 HTML 文件中的图片资源是相对来说最麻烦的这里需要引鼡一个插件—— html-withimg-loder
这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。
感谢您的浏览希望能有所帮助
}