写了一个很简单的demo，HMR 开启成功，但是只对改变 CSS 有效，改变 HTML 只会刷新页面，没有达到热替换的效果。

global webpack version 3.3.0

Mac OS 10.11.6

this is my package.json file:

{

"name": "demo-hmr",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "webpack-dev-server --hot --inline webpack.config.js"

"keywords": [],

"author": "",

"license": "MIT",

"dependencies": {

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-preset-env": "^1.6.0",

"css-loader": "^0.28.7",

"style-loader": "^0.18.2",

"webpack": "^3.5.6",

"webpack-dev-server": "^2.7.1"

}

this is my webpack.config.js file:

module.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader'

}

{

test: /\.css$/,

use: [

'style-loader',

'css-loader'

]

}

]

}

this is my main.js file:

I change dom in this file, just change innerHTML of divv, then page will refresh, not i want for.

import app from './app.css'

var divv = document.createElement('div')

divv.innerHTML = "Hello webpack"

document.body.appendChild(divv)

this is my app.css file:

body {

background-color: yellow;

}

this is my index.html file:

Hello World!

html 子框架刷新,webpack 热更新只对改变 CSS 有效改变 HTML 页面会刷新没用其他框架。...相关推荐

【Webpack】1047- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
webpack 热更新原理解析
一.什么是 HMR HMR 全称 Hot Module Replacement,中文语境通常翻译为模块热更新,它能够在保持页面状态的情况下动态替换资源模块,提供丝滑顺畅的 Web 页面开发体验. 1. ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
修改html时webpack热更新,利用webpack实现对html文件的热更新
webpack中webpack-dev-server是一个简单的web服务器,能够帮助咱们实现代码的热更新,即在实际开发中只需保存修改完后的代码,不用手动刷新页面就能够看到效果.在使用webpack- ...
less webpack 热更新_webpack---less+热更新使用
最近尝试用less写界面,webpack进行打包,然后发现每次修改less时都需要重新执行webpack打包一下,于是就想到了webpack热更新这个功能. 一.使用less less是一门css预处 ...
理解 webpack 热更新
一.开启:HotModuleReplacementPlugin/--hot 二.webpack 编译构建后,控制台出现: 1.新的 hash 值 // 作为下次热更新的标识 2.新的 json 文件 ...
webpack热更新原理-连阿珍都看懂了
前言在旧开发的时代,前端项目在开发的过程中修改代码,很有可能是手动切到浏览器刷新页面来看到改动效果.操作不方便且页面之前的编辑记录也都丢失,体验可以说为0.想象一下一个表达你努力填满了所有输入项,结 ...
webpack热更新
什么是模热更新?有什么优点模块热更新是webpack的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新. 在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器. 优 ...
webpack热更新原理
webpack热更新原理文章目录 webpack热更新原理一.什么是热更新? 二.webpack热更新基本原理 1.修改webpack.config.js的entry配置 2.启动本地服务 3.监 ...

html 子框架刷新,webpack 热更新只对改变 CSS 有效改变 HTML 页面会刷新没用其他框架。...

Hello World!

html 子框架刷新,webpack 热更新只对改变 CSS 有效改变 HTML 页面会刷新没用其他框架。...相关推荐

最新文章

热门文章

html 子框架刷新,webpack 热更新 只对改变 CSS 有效 改变 HTML 页面会刷新 没用其他框架。...

Hello World!

html 子框架刷新,webpack 热更新 只对改变 CSS 有效 改变 HTML 页面会刷新 没用其他框架。...相关推荐

最新文章

热门文章

html 子框架刷新,webpack 热更新只对改变 CSS 有效改变 HTML 页面会刷新没用其他框架。...

html 子框架刷新,webpack 热更新只对改变 CSS 有效改变 HTML 页面会刷新没用其他框架。...相关推荐