webpack-dev-server在CLI熱模塊重載頁面的內聯模式將刷新更改dom

當我更改dom時，頁面將刷新，但更改css，hmr works，頁面不刷新，將熱替換。我希望當我改變DOM的頁面不會刷新，而不是熱更換webpack-dev-server在CLI熱模塊重載頁面的內聯模式將刷新更改dom

全球的WebPack版本3.3.0的Mac OS 10.11.6

這是我的package.json文件：

{ 
    "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" 
    } 
}

這是我webpack.config.js文件：

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' 
     ] 
     } 
    ] 
    } 
}

這是我的main.js文件，我改變DOM在這個文件中，只需更改divv的innerHTML，然後頁面將刷新，結果不是我想要的。

import app from './app.css' 

var divv = document.createElement('div') 

divv.innerHTML = "Hello webpack" 

document.body.appendChild(divv)

這是我app.css文件：

body { 
    background-color: yellow; 
}

這是我的index.html文件：

<html> 
    <body> 
     <h1>Hello World!</h1> 
    <script type="text/javascript" src="bundle.js"></script> 
    </body> 
</html>

對不起我的簡單的問題，我糟糕的英國&格式。

來源

2017-09-07 Ming Ye

不用擔心你的英文是好的，你可以使用這個[網站]（https://www.deepl.com/translator）這很不錯。那麼關於你的問題我不知道發生了什麼，但我有這個[回購]（https://github.com/arkgast/webpack-hot-reload），你可能會發現有幫助，當然官方[指導] （https://webpack.js.org/guides/getting-started/）仔細查看。問候 –

事實上，webpack不是很聰明，知道如何更換你的模塊。在css-loader中，hmr邏輯已經實現了，因爲它非常微不足道。但是對於你的文件，你應該使用API來實現HMR。我同意這不是很微不足道。但它很有趣。

來源

2017-09-11 08:37:54

webpack-dev-server在CLI熱模塊重載頁面的內聯模式將刷新更改dom

回答

相關問題