webpack中webpack-dev-server是一個簡單的web服務(wù)器，能夠幫助咱們實現(xiàn)代碼的熱更新，即在實際開發(fā)中只需保存修改完后的代碼，不用手動刷新頁面就能夠看到效果。在使用webpack-dev-server時，會發(fā)如今對js、css文件中的代碼修改時，能夠很容易地實現(xiàn)頁面熱更新；修改html文件內(nèi)容時，保存代碼，頁面并無自動更新。(能夠在html-hot-reload項目的中demo1分別修改html、js、css文件試一試)。javascript

這是由于webpack在運行時它會根據(jù)webpack.config.js中入口文件(entry)來開始查詢?nèi)康囊蕾嚥⒏鶕?jù)不一樣的處理器(loader)、插件(plugin)來解析、打包，webpack-dev-server會實時監(jiān)控webpack打包后的文件并實現(xiàn)熱更新。js、css文件很容易實現(xiàn)熱更新是由于js文件通常為入口文件或者js文件、css文件與入口文件存在依賴關(guān)系，在webpack打包后受到webpack-dev-server的實時監(jiān)控。因為html與入口文件不存在依賴關(guān)系，因此實現(xiàn)不了熱更新。能夠經(jīng)過如下兩種方法實現(xiàn)對html文件熱更新。css

方法一：利用html-webpack-plugin插件html

html-webpack-plugin插件就是在webpack打包時從新生成一個html文件java

(能夠在html-hot-reload項目的中demo2中分別修改html、js、css文件查看效果)webpack

一、安裝html-webpack-plugin插件git

npm install --save-dev html-webpack-plugin

二、在webpack.config.js中配置html-webpack-plugin插件github

......

const htmlWebpackPlugin = require('html-webpack')

module.exports = {

......

plugins: [

new htmlWebpackPlugin({

template: './index.html'

})

]

......

}

方法二：在入口文件中引入html文件，并使用raw-loader對html文件進(jìn)行處理，實現(xiàn)html熱更新web

在入口文件中引入html文件是為了讓html與入口文件產(chǎn)生依賴，這樣在webpack運行時能夠打包處理html文件。npm

(能夠在html-hot-reload項目的中demo3中分別修改html、js、css文件查看效果)服務(wù)器

一、安裝raw-loader

npm install --save-dev raw-loader

二、在webpack.config.js中配置raw-loader

module.exports = {

......

module: {

rules: [

......

{

test: /\.(htm|html)$/,

use: [

'raw-loader'

]

}

......

]

}

......

}

三、在入口文件index.js文件中引入index.html文件

import '../index.html'

綜上所述，利用以上兩種方法，咱們能夠在webpack搭建的環(huán)境中實現(xiàn)對html文件的熱更新。能夠參考html-hot-reload項目中的代碼進(jìn)行學(xué)習(xí)理解。

總結(jié)

以上是生活随笔為你收集整理的修改html时webpack热更新,利用webpack实现对html文件的热更新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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