众多周知, webpack并不擅长处理解析页面模板上的资源依赖, 例如图片. 现在我们基于node开发web应用的项目也越来越多, 基于node服务端解析的模板也有很多选择了, 往往我们在制作服务端渲染的模板时, 很难避免会有img标签,并引用项目内的一些图片, 可我们只能知道项目内的图片源文件, 而并不能确定线上的静态资源真实路径, 如: cdn + webpack编译后的带hash文件名的图片. 那么我们页面模板上的img标签的src指向就很尴尬了.
基于上述情况, 我第一时间想到的就是用动态加载js和css的方式, 通过webpack编译后生成的assets映射关系文件,(assets-webpack-plugin), 进行图片的真是路径动态解析. 可是问题又来了, webpack编译后的输出对于图片资源的信息跟js/css不一致, 他们没有 key-value 对的关系, 插件编写起来实在痛不欲生.
不知道有没有前辈对于此类问题有什么其他的方案, 望不吝赐教!!
1.配置loader：
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url?limit=8192&name=img/[hash:8].[ext]'
}
注：name后面是打包后的路径
2.在jsx中导入，并在jsx中使用，如下：
import img from 'index.png';
<img src={img} />我之前编写了一个 node 包，用于简单地解析出 HTML 中的依赖，然后可以匹配替换资源路径，你看下是否能够使用：wesber