Comment regarder index.html utilisant webpack-dev-server et html-webpack-plugin

le problème est cet index.html n'est pas regardé par Webpack. Il ne regarde que les fichiers qui sont "requis" ou "importés" quelque part dans votre code et les chargeurs sont à l'essai pour.

la solution comporte deux parties.

Premier besoin de l'index.fichier html dans votre point d'entrée. Techniquement, vous pouvez exiger de n'importe où dans votre application, mais c'est assez pratique. Je suis sûr que vous pourriez aussi juste exiger votre modèle si vous étiez utiliser un modèle avec votre html-webpack-plugin.

j'ai exigé de mon index.html dans mon index.fichier js, ce qui est mon point d'entrée:

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

Enfin, installer et ajouter le chargeur brut avec tous vos autres chargeurs, vers votre fichier de configuration Webpack. Donc:

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

le chargeur brut convertira à peu près n'importe quel fichier "requis" en une chaîne de texte et, alors, Webpack le regardera pour vous et rafraîchira le dev-server chaque fois que vous apportez une modification.

ni Webpack, ni lui-même, ni votre programme ne feront quoi que ce soit avec l'index.fichier html (ou modèle) à l'étape où il est chargé. C'est complètement inutile pour vos environnements de production ou de test, donc juste pour une bonne mesure, Je ne l'ajoute que si j'exécute le serveur de développement:

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

En théorie, vous pouvez "exiger" un tas d'autres des fichiers html statiques que vous souhaitez regarder. ...ou des fichiers texte. J'utilise le raw-chargeur, moi-même, Angulaire directive modèles, mais je n'ai pas à les ajouter au début de mon point d'entrée. Je peux juste besoin à l'intérieur de la directive propriété de modèle, comme ceci:

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

il suffit d'ajouter watchContentBase: true pour votre devServerconfig. webpack-dev-server va surveiller les changements dans tous les fichiers qui sont situés dans contentBase dir. Ici, on regarde tous les fichiers à l'intérieur ./ src

webpack.config.js:

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

} 

une Autre solution est d'utiliser fichier-chargeur pour importer le fichier html au fichier javascript d'entrée.

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

Vous pouvez avoir votre html-webpack-plugin configuration comme d'habitude

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'],
  }
 })
]

ceci n'écrit rien au disque quand webpack-dev-server est en cours d'exécution