Wie man index.html mit webpack-dev-server und html-webpack-plugin beobachtet

Question

Ich benutze webpack-dev-server für die Entwicklung mit html-webpack-plugin um die index.html mit Revisionsquellen zu generieren. Die Sache ist jedes Mal, wenn ich die index.html ändere, wird das Bundle-System nicht erneut aufgebaut. Ich weiß, dass der Index nicht im Eintrag ist, aber gibt es einen Weg, dies zu lösen?

Answer 1

Das Problem ist, dass index.html nicht von Webpack überwacht wird. Es überwacht nur die Dateien, die in Ihrem Code "benötigt" oder "importiert" sind und für die die Loader testen.

Die Lösung besteht aus zwei Teilen.

Zuerst benötigen Sie die index.html Datei in Ihrem Einstiegspunkt. Technisch können Sie es überall in Ihrer Anwendung anfordern, aber das ist ziemlich praktisch. Ich bin sicher, dass Sie auch Ihre Vorlage benötigen könnten, wenn Sie eine Vorlage mit Ihrem html-webpack-plugin verwenden würden.

erforderlich ich meine index.html in meiner index.js-Datei, die mein Einstiegspunkt ist:

require('./index.html') 
const angular = require('angular') 
const app = angular.module('app', []) 
//...so on and so forth 

Schließlich, installieren und die raw-loader mit allen Ihren anderen Ladern, um Ihre Webpack Config hinzufügen Datei. Also:

{ 
    test: /\.html$/, 
    loader: "raw-loader" 
} 

Die rohe loader konvertiert nahezu jede Datei, die „erforderlich“ in eine Kette von Text und dann Webpack wird es beobachten für Sie und aktualisieren Sie die dev-Server jedes Mal, wenn Sie eine Änderung vornehmen .

Weder Webpack selbst noch Ihr Programm wird tatsächlich etwas mit der index.html-Datei (oder Vorlage) in der Phase tun, in der es geladen wird. Es ist völlig unnötig für Ihre Produktion oder Testumgebungen, so dass nur für eine gute Maßnahme, ich kann es nur hinzufügen, wenn ich die Entwicklung Server ausgeführt bin:

/* eslint no-undef: 0 */ 

if (process.env.NODE_ENV === 'development') { 
    require('./index.html') 
} 

const angular = require('angular') 
const app = angular.module('app', []) 
//...so on and so forth 

Theoretisch Sie ein paar andere statische HTML „in require“ kann Dateien, die Sie sehen möchten. ... oder Textdateien für diese Angelegenheit. Ich benutze den row-loader, ich selbst, für Angular-Direktive-Vorlagen, aber ich muss diese nicht am Anfang meines Einstiegspunktes hinzufügen. Ich kann nur innerhalb der Richtlinie Vorlage Eigenschaft benötigen, wie folgt aus:

module.exports = function(app) { 
    app.directive('myDirective', function(aListItem) { 
    return { 
     template: require('./myTemplate.html'), 
     restrict: 'E', 
     controller: function($scope) { 
     $scope.someThingThatGoesInMyTemplate = 'I love raw-loader!' 
     } 
    } 
    }) 
} 

Answer 2

einfach watchContentBase: true auf Ihre devServer ‚s Config hinzuzufügen. webpack-dev-server wird auf Änderungen in allen Dateien achten, die sich in contentBase dir befinden. Hier sehen wir alle Dateien innerhalb ./src

webpack.config.js:

... devServer: { port: 8080, contentBase: './src', watchContentBase: true }