webpack模板中static和assets的区别

图一：引用了三个图片，前两个是绝对路径，后一个是相对路径。

图二：ctrl+h查找绝对路径在所出的包里面的位置。可以发现，页面中使用绝对路径时，图片文件不会被打包进js，图片文件需要被原原本本以图片格式存在static目录下，如果修改static中图片文件名，会导致页面找不到图片。

图三：ctrl+h查找相对路径在所出的包里面的位置。可以发现，使用相对路径引用static中的图片文件会被打包进js中，即使删掉static中的图片，页面依然能展示图片，因为打包后的页面不只是图片路径而是完整的图片文件数据。

总：webpack默认将static目录的文件原原本本输出，所以当页面要使用绝对路径时，图片就需要放在static目录。如果用了相对路径，图片仍然放在static，static目录的图片被打包出来也没有多大意义，删了也不会影响图片展示。所以一般assets目录存相对路径用的图片，static存绝对路径用的图片。相对目录的图片在出包后由于被打包进js，不方便更换图片，而绝对路径的图片没有被打包进js而是在static文件夹下，所以可以随时更换。就是网上所说的，static放有可能经常被更换的图片（商品图片之类），assets放组件使用的图片（如一些menu的背景图片等）。其实主要区别在于是以原来的文件目录输出，还是打包进js里面。需要以原文件格式输出的目录可以在webpack中配置，不一定都输出在static目录，具体怎么配置目前还没搞清楚。

来源于：

图一：引用了三个图片，前两个是绝对路径，后一个是相对路径。

图二：ctrl+h查找绝对路径在所出的包里面的位置。可以发现，页面中使用绝对路径时，图片文件不会被打包进js，图片文件需要被原原本本以图片格式存在static目录下，如果修改static中图片文件名，会导致页面找不到图片。

图三：ctrl+h查找相对路径在所出的包里面的位置。可以发现，使用相对路径引用static中的图片文件会被打包进js中，即使删掉static中的图片，页面依然能展示图片，因为打包后的页面不只是图片路径而是完整的图片文件数据。

总：webpack默认将static目录的文件原原本本输出，所以当页面要使用绝对路径时，图片就需要放在static目录。如果用了相对路径，图片仍然放在static，static目录的图片被打包出来也没有多大意义，删了也不会影响图片展示。所以一般assets目录存相对路径用的图片，static存绝对路径用的图片。相对目录的图片在出包后由于被打包进js，不方便更换图片，而绝对路径的图片没有被打包进js而是在static文件夹下，所以可以随时更换。就是网上所说的，static放有可能经常被更换的图片（商品图片之类），assets放组件使用的图片（如一些menu的背景图片等）。其实主要区别在于是以原来的文件目录输出，还是打包进js里面。需要以原文件格式输出的目录可以在webpack中配置，不一定都输出在static目录，具体怎么配置目前还没搞清楚。