比如html文件中有如下代碼

<div>

<!-- /dev 是開發(fā)目錄 -->

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

</div>

然后經(jīng)過處理后變成如下

<div>

<!-- /static 是上線目錄, a7l3k2n是圖片的hash -->

<!-- 同時(shí)把img.png從/dev目錄移動(dòng)到/static目錄 -->

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

</div>

如果直接在JavaScript中引入圖片文件是可以解決的，但總覺得引入資源的時(shí)候還要專門去寫一串JS代碼感覺很蛋疼。

自己在webpack打包時(shí)的plugins中自定義一個(gè)插件批量替換即可。如果不知道怎么做，這有例子

用 html-webpack-plugin 可以向頁面?zhèn)鬟f變量，根據(jù)開發(fā)環(huán)境和生產(chǎn)環(huán)境傳遞不同的路徑即可。

// 省略其他 webpack 配置

plugins: [

new HtmlWebpackPlugin({

// 省略其他插件配置項(xiàng)

projectPath: 'static'

})

]

頁面：

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

輸出：

你這種情況，只能是把html文件也交給webpack來管理了。

具體的思路是，利用

html-webpack-plugin

并傳入頁面模板來生成HTML文件，那么你就可以在頁面模板中直接

require

圖片了。

例子請(qǐng)看這里：《webpack多頁應(yīng)用架構(gòu)系列(十二)：利用webpack生成HTML普通網(wǎng)頁&頁面模板》

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。