webpack-dev-server Inline-Modus auf CLI Hot-Modul Reload-Seite aktualisiert für Änderung dom

Wenn ich Dom ändern, wird Seite aktualisiert, aber CSS ändern, hmr funktioniert, Seite nicht aktualisieren, wird Hot-Ersatz. Ich mag die Seite nicht statt heißen Ersatz aktualisieren, wenn i domwebpack-dev-server Inline-Modus auf CLI Hot-Modul Reload-Seite aktualisiert für Änderung dom

globale webpack Version 3.3.0, Mac OS 10.11.6

das ist meine package.json Datei ändern:

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

diese meine ist webpack.config.js Datei:

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

das ist meine main.js Datei, ich dom in dieser Datei ändern, ändere nur innerHTML von divv, dann wird Seite aktualisiert, das Ergebnis ist nicht ich will für.

import app from './app.css' 

var divv = document.createElement('div') 

divv.innerHTML = "Hello webpack" 

document.body.appendChild(divv)

das ist mein app.css Datei:

body { 
    background-color: yellow; 
}

das ist mein index.html Datei:

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

traurig über meine einfache Frage und meine schrecklichen Englisch & Format.

Quelle

2017-09-07 Ming Ye

Mach dir keine Sorgen über Ihr Englisch ist in Ordnung, Sie können diese [Website] (https://www.deepl.com/translator) verwenden, es ist ziemlich gut. Gut über Ihre Frage Ich bin mir nicht sicher, was passiert, aber ich habe diese [Repo] (https://github.com/arkgast/webpack-hot-reload), die Sie hilfreich finden können und natürlich die offizielle [guide] (https://webpack.js.org/guides/getting-started/) sehen Sie es sich genau an. Grüße –

Eigentlich ist Webpack nicht so schlau zu wissen, wie Sie Ihre Module ersetzen möchten. In css-loader ist die hmr-Logik bereits implementiert, weil sie so trivial ist. Aber für Ihre Dateien sollten Sie HMR mit API implementieren. Ich stimme zu, dass es nicht so trivial ist. Aber es ist interessant genug.

Quelle

2017-09-11 08:37:54

webpack-dev-server Inline-Modus auf CLI Hot-Modul Reload-Seite aktualisiert für Änderung dom

Antwort

Verwandte Themen