比如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普通網頁&頁面模板》

總結

以上是生活随笔為你收集整理的html防替换资源,Webpack中有没有替换html静态资源的插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。