修改html时webpack热更新,利用webpack实现对html文件的热更新

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文件的热更新相关推荐

java实现对pdf文件压缩，拆分，修改水印，添加水印
最近要实现一个文件上传,并且在线预览上传文件的功能,设计思路是:把上传的文件通过openoffice转成pdf文件,并将pdf文件以流的形式返回到浏览器,由于上传的部分文件过大,转成pdf后传回前端浏 ...
html 保存草稿,利用localStorage实现对ueditor编辑内容定时保存为草稿，ueditor草稿箱...
利用localStorage实现对ueditor编辑内容定时保存为草稿,ueditor草稿箱直接看代码吧 1.引入ueditor和ueditor的使用我就不细说了详情请戳http://blog.c ...
python中load_iris_在python中利用KNN实现对iris进行分类的方法
如下所示: from sklearn.datasets import load_iris iris = load_iris() print iris.data.shape from sklearn.c ...
用JAVA Excel API 实现对Excel表格的读写更新（转）
package myexceltest; import jxl.*; import java.io.*; import jxl.write.*; /** * <p>java读取Excel ...
java实现对Json文件及字符串的格式美化及修改调整
本文转载于原文链接:https://blog.csdn.net/weixin_41979002/article/details/128160841 一.前言之前转载过一篇文章,也是有关于通过java ...
oracle cronb,利用Crontab实现对Oracle数据库的定时备份
假设数据库的拥有者为oracle,数据库的用户为scott,其口令为trigger, Oracle数据库的参数$ORACLE_HOME为/usr/oracle,$ORACLE_SID为oracle1, ...
利用stm32f103c8t6实现对WS2812的控制（从硬件出发）
代码思路(IO翻转模拟时序方法) 目录所用IO资源电路图 STM32CUBEMX配置延时函数思路代码部分所用IO资源电路图调试所用开发板开源平台链接(含原理图,PCB)https://o ...
轻松实现对pdf文件编辑修改
虽然pdf文件现在应用的比较多,但还是有很多人对这种文件不太了解,当要对pdf文件进行编辑修改时也不知道该怎么去操作.其实pdf文件的编辑也是很简单的,就和普通的文档一样.下面就来讲下pdf文件怎么编 ...
利用Spire实现对Word模板的指定文字替换（文字、图片、表格）
1.安装Spire.Office word文件内对要替换的地方用 [=xxx] 做标记 2.WordUtil.cs using Spire.DataExport.XLS; using Spire. ...

修改html时webpack热更新,利用webpack实现对html文件的热更新

修改html时webpack热更新,利用webpack实现对html文件的热更新相关推荐

最新文章

热门文章