寫了一個很簡單的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!

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html 子框架刷新,webpack 热更新 只对改变 CSS 有效 改变 HTML 页面会刷新 没用其他框架。...的全部內容，希望文章能夠幫你解決所遇到的問題。

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