wake-up-neo.com

Wie Sie index.html mit dem webpack-dev-server und dem html-webpack-plugin ansehen

Ich verwende 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 enthalten ist, aber gibt es eine Möglichkeit, dies zu lösen?

webpackwebpack-dev-server
46
elaijuh

Das Problem ist, dass index.html von Webpack nicht überwacht wird. Es überwacht nur die Dateien, die irgendwo in Ihrem Code "erforderlich" oder "importiert" sind, und die Ladeprogramme testen.

Die Lösung besteht aus zwei Teilen.

First erfordert die index.html-Datei in Ihrem Einstiegspunkt. Technisch gesehen können Sie es an einer beliebigen Stelle in Ihrer Anwendung benötigen, aber das ist ziemlich praktisch. Ich bin mir sicher, Sie könnten auch nur Ihre Vorlage anfordern, wenn Sie eine Vorlage mit Ihrem HTML-Webpack-Plugin verwenden.

Ich habe meine index.html in meiner index.js-Datei benötigt, die mein Einstiegspunkt ist:

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

Schließlich, installiere und füge den raw-loader mit allen anderen Loadern deiner Webpack-Konfigurationsdatei hinzu. Somit:

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

Der Raw-Loader konvertiert fast jede Datei, die "erforderlich" ist, in eine Textzeichenfolge. Webpack überwacht sie dann und aktualisiert den Dev-Server bei jeder Änderung.

Weder Webpack selbst noch Ihr Programm wird in der Phase, in der es geladen wird, tatsächlich etwas mit der Datei index.html (oder der Vorlage) tun. Für Ihre Produktions- oder Testumgebungen ist dies völlig unnötig. Ich füge es nur hinzu, wenn ich den Entwicklungsserver betreibe:

/* 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 können Sie eine Reihe anderer statischer HTML-Dateien "anfordern", die Sie anzeigen möchten. ... oder Textdateien für diese Angelegenheit. Ich verwende den Raw-Loader für Angular-Direktiven, ich muss sie jedoch nicht am Anfang meines Einstiegspunkts hinzufügen. Ich kann nur innerhalb der Direktive Vorlageneigenschaft wie folgt verlangen:

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!'
      }
    }
  })
}
43
Gabriel Kunkel

Fügen Sie einfach watchContentBase: true zur Konfiguration Ihrer devServer hinzu. webpack-dev-server überwacht alle Dateien, die sich in contentBase dir befinden, auf Änderungen. Hier sehen wir uns alle Dateien in ./src an

webpack.config.js:

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

}
22
B. Laskowski

Eine andere Lösung ist die Verwendung von file-loader , um die HTML-Datei in der Javascript-Eintragsdatei zu importieren.

import 'file-loader!../templates/index.html';

Sie können Ihre html-webpack-plugin -Konfiguration wie gewohnt verwenden

plugins: [
 new HtmlWebPackPlugin({
  template: path.resolve(__dirname, 'src/templates/index.html'),
  filename: path.resolve(__dirname, 'dist/index.html'),
  files: {
   css: ['style.css'],
   js: ['main.js'],
  }
 })
]

Dies schreibt nichts auf die Disc, wenn webpack-dev-server ausgeführt wird

0
ibex