html防替换资源,Webpack中有没有替换html静态资源的插件

比如html文件中有如下代码

<div>

<!-- /dev 是开发目录 -->

<img src="/dev/img.png">

</div>

然后经过处理后变成如下

<div>

<!-- /static 是上线目录, a7l3k2n是图片的hash -->

<!-- 同时把img.png从/dev目录移动到/static目录 -->

<img src="/static/img.a7l3k2n.png">

</div>

如果直接在JavaScript中引入图片文件是可以解决的，但总觉得引入资源的时候还要专门去写一串JS代码感觉很蛋疼。

自己在webpack打包时的plugins中自定义一个插件批量替换即可。如果不知道怎么做，这有例子

用 html-webpack-plugin 可以向页面传递变量，根据开发环境和生产环境传递不同的路径即可。

// 省略其他 webpack 配置

plugins: [

new HtmlWebpackPlugin({

// 省略其他插件配置项

projectPath: 'static'

})

]

页面：

<img src="<%=htmlWebpackPlugin.options.projectPath%>/a.jpg" alt="">

输出：

你这种情况，只能是把html文件也交给webpack来管理了。

具体的思路是，利用

html-webpack-plugin

并传入页面模板来生成HTML文件，那么你就可以在页面模板中直接

require

图片了。

例子请看这里：《webpack多页应用架构系列(十二)：利用webpack生成HTML普通网页&页面模板》