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?Come guardare index.html utilizzando webpack-dev-server e html-webpack-plugin
risposta
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!'
}
}
})
}
Gesù, come vola il tempo! Mi dispiace di non averlo fatto. Questo è fantastico, funziona magnificamente! – Spock
bel trucco! – elaijuh
Sono confuso su come ottenere lo stato di process.env qui. è gestito questo lato server? l'utilizzo dello snippet di codice nel mio index.js non funziona.non c'è riconoscimento di quella variabile ed è indefinito dal lato client, credo. puoi chiarire come fai questo lavoro? – spb
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 }
Ho cercato troppo a lungo per trovare una soluzione semplice per guardare il mio html/ramoscello (templates) e semplicemente ricarica la pagina quando questi cambiano. Sto usando webpack e dev-server per un sito non SPA (Craft CMS). Tutto ciò che dovevo fare era cambiare il mio 'contentBase' in' './templates ''. Una soluzione semplice che era giusta nei documenti per tutto il tempo, ma non ha raccolto sul caso d'uso per. Grazie per questa risposta! –
fatto la mia soluzione a risolvere il problema? Mi piacerebbe sapere se hai trovato un altro modo per farlo. –
Sono nella stessa barca .. Sto cercando di evitare due diversi index.html, uno per la produzione e uno per lo sviluppo, facendo riferimento a diversi asset .. – Spock
@Spock Vedere la mia risposta qui sotto. È possibile richiedere il modello nel punto di ingresso. Ogni volta che si modifica il modello, il server dev deve essere aggiornato. –