背景

webpack打包后页面是图片地址 src=”[object Module]”

通过React dev tool查看组件属性,发现src={default: xxx.jpg}

接着查看图片的引用方式使用的是const a= require(‘img.jpg’)方式,与import进行了混用。

排查

推测是esModule处理上导致的,在webpack的处理上是通过url-loader+file-loader处理的。

https://github.com/webpack-contrib/url-loader#esmodule
https://github.com/webpack-contrib/file-loader#esmodule

从文档上看确实增加了esModule处理模式,主要是为了配合webpack做tree shaking等。那么对于图片目前用不上,所以配置esModule: false即可

avatar
  Subscribe  
提醒