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

Question

比如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代码感觉很蛋疼。

Answer 1

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

Answer 2

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

// 省略其他 webpack 配置
plugins: [
    new HtmlWebpackPlugin({
      // 省略其他插件配置项
      projectPath: 'static'
    })
]

页面：

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

输出：

Answer 3

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

具体的思路是，利用html-webpack-plugin并传入页面模板来生成HTML文件，那么你就可以在页面模板中直接require图片了。

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