Come guardare index.html utilizzando webpack-dev-server e html-webpack-plugin

Question

Sto usando webpack-dev-server per lo sviluppo con il plugin html-webpack per generare l'index.html con le fonti di revisione. Il fatto è che ogni volta che cambio index.html il sistema bundle non verrà ricostruito di nuovo. So che l'indice non è nella voce, ma c'è un modo per risolvere questo?

Answer 1

Il problema è che index.html non viene guardato da Webpack. Guarda solo i file "obbligatori" o "importati" da qualche parte nel codice e per i quali i caricatori stanno testando.

La soluzione ha due parti.

Il primo richiede il file index.html nel punto di ingresso. Tecnicamente, puoi richiederlo ovunque nella tua applicazione, ma questo è abbastanza conveniente. Sono sicuro che potresti anche richiedere il modello se stavi utilizzando un modello con il tuo plugin html-webpack.

ho richiesto il mio index.html nel mio file index.js, che è il mio punto di ingresso:

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

Infine, installare e aggiungere il raw-loader con tutti i tuoi altri caricatori, alla propria configurazione Webpack file. Così:

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

Il caricatore grezzo sarà convertire praticamente qualsiasi file che è "necessario" in una stringa di testo e, quindi, Webpack guarderà per voi e aggiornare il dev-server ogni volta che si apporta una modifica .

Né Webpack, né il suo programma, in realtà, eseguiranno alcunché con il file index.html (o modello) nello stadio in cui è stato caricato. E 'completamente inutile per gli ambienti di produzione o di test, quindi solo per buona misura, aggiungo solo che se sto in esecuzione il server di sviluppo:

/* 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 

In teoria si può "richiedere in" un mucchio di altre html statico file che vorresti che guardino. ... o file di testo per quella materia. Io uso il caricatore grezzo, io stesso, per i modelli di direttive angolari, ma non devo aggiungere quelli all'inizio del mio punto di ingresso. Posso solo richiedere all'interno della proprietà modello direttiva, in questo modo:

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

Basta aggiungere watchContentBase: true di config 's tuoi devServer. webpack-dev-server controllerà le modifiche in tutti i file che si trovano nella directory contentBase. Qui guardiamo tutti i file all'interno ./src

webpack.config.js:

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