HMR nicht möglich (Hot Module Replacement) css / scss mit Webpack 2.2.0 und webpack-dev-server 2.2.1

9

Versionen

"extract-text-webpack-plugin": "^ 2.0.0-rc.2",

"webpack": "^ 2.2.0",

"webpack-dev-server": "^ 2.2.1"

Problem

"extract-text-webpack-plugin": "^ 1.0.1",

"webpack": "^ 1.14.0",

"webpack-dev-server": "^ 1.16.2"

HMR css / scss ist seit dem Upgrade auf Version 2 nicht mehr funktionsfähig, das Ändern der Stile löst eine Änderung aus (siehe Beispiel unten), aber ich muss die Seite manuell aktualisieren, um die Änderungen zu sehen, die die Seite nicht automatisch aktualisiert, auch wenn Ich ändere eine js-Datei nach dem Ändern einer scss-Datei die Änderungen werden dann reflektiert, wie die js-Änderung eine HMR auslösen, die auch die Stiländerungen enthält, aber nur die Änderung der Stile ohne js Änderungen erfordert eine manuelle Seitenaktualisierung.

Irgendwelche Ideen, wenn ich etwas falsch konfiguriert habe oder was ich tun muss, damit das css / scss HMR funktioniert?

Ich habe das Problem auch hier veröffentlicht: Ссылка , aber ich bin mir nicht sicher, ob Es ist webpack-dev-server issue oder das extract-text-webpack-plugin Problem oder einfach etwas was ich gemacht habe.

Befehl läuft:

npm run dev

%Vor%

Konfiguration vor dem Upgrade:

%Vor%

Konfiguration nach dem Upgrade:

%Vor%

Gibt die anfängliche Anfangsseitenladung aus.

%Vor%

Ausgabesample nach Änderung der SSS.

%Vor%

Sie können die Größe der main.css ändern, aber die Seite wurde nie aktualisiert, bis ich f5 gedrückt habe

    
Robert Leggett 31.01.2017, 13:15
quelle

1 Antwort

2

Wie auf der github-Hauptseite von extract-text-webpack-plugin angegeben: Vorbehalte : "Kein Hot Module Replacement"

Sie sollten dieses Plugin nicht während der Entwicklung verwenden, es ist immer noch nützlich, um Build für die Produktion zu erstellen. Sie können zwei Webpack-Konfigurationsdateien erstellen, eine für dev und eine für prod, die für beide Szenarien hilfreich sein kann.

    
Sajid Ali 31.01.2017 17:20
quelle