0

Lorsque je change de dom, la page va rafraîchir, mais changer css, hmr fonctionne, la page ne se rafraîchit pas, va remplacer à chaud. Je veux que la page ne sera pas rafraîchir au lieu de remplacement à chaud quand je change domwebpack-dev-server Mode en ligne sur la page de rechargement de module chaud CLI sera actualisé pour le changement dom

version globale de webpack 3.3.0, Mac OS 10.11.6

ceci est mon fichier 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" 
    } 
} 

cette est mon fichier 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' 
     ] 
     } 
    ] 
    } 
} 

c'est mon fichier main.js, je change dom dans ce dossier, change juste innerHTML de divv, alors la page se régénérera, le résultat n'est pas ce que je veux.

import app from './app.css' 

var divv = document.createElement('div') 

divv.innerHTML = "Hello webpack" 

document.body.appendChild(divv) 

c'est mon fichier app.css:

body { 
    background-color: yellow; 
} 

c'est mon fichier index.html:

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

désolé ma question simple et mon mauvais anglais le format &.

+0

Ne vous inquiétez pas pour votre anglais, c'est ok, vous pouvez utiliser ce [site] (https://www.deepl.com/translator) c'est plutôt bien. Eh bien à propos de votre question, je ne suis pas sûr de ce qui se passe, mais j'ai ce [repo] (https://github.com/arkgast/webpack-hot-reload) que vous pouvez trouver utile et bien sûr le [guide] officiel (https://webpack.js.org/guides/getting-started/) consultez-le attentivement. Cordialement –

Répondre

0

En fait, webpack n'est pas très intelligent pour savoir comment remplacer vos modules. Dans css-loader, la logique hmr est déjà implémentée car elle est si triviale. Mais pour vos fichiers, vous devez implémenter HMR en utilisant API. Je suis d'accord que ce n'est pas si trivial. Mais c'est assez intéressant.