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

這是由于webpack在運行時它會根據webpack.config.js中入口文件(entry)來開始查詢全部的依賴并根據不一樣的處理器(loader)、插件(plugin)來解析、打包，webpack-dev-server會實時監控webpack打包后的文件并實現熱更新。js、css文件很容易實現熱更新是由于js文件通常為入口文件或者js文件、css文件與入口文件存在依賴關系，在webpack打包后受到webpack-dev-server的實時監控。因為html與入口文件不存在依賴關系，因此實現不了熱更新。能夠經過如下兩種方法實現對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文件進行處理，實現html熱更新web

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

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

一、安裝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搭建的環境中實現對html文件的熱更新。能夠參考html-hot-reload項目中的代碼進行學習理解。

總結

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

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