web-dev-qa-db-fra.com

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

J'utilise webpack-dev-server pour le développement avec html-webpack-plugin afin de générer l'index.html avec les sources de révision. En réalité, chaque fois que je modifie le fichier index.html, le système de regroupement ne sera pas reconstruit à nouveau. Je sais que l'index n'est pas dans l'entrée, mais existe-t-il un moyen de résoudre ce problème?

webpackwebpack-dev-server
46
elaijuh

Le problème est que index.html n'est pas surveillé par Webpack. Il ne surveille que les fichiers "obligatoires" ou "importés" quelque part dans votre code et que les chargeurs testent.

La solution comporte deux parties.

First requiert le fichier index.html dans votre point d'entrée. Techniquement, vous pouvez en avoir besoin n'importe où dans votre application, mais c'est très pratique. Je suis sûr que vous pourriez aussi avoir besoin de votre modèle si vous utilisiez un modèle avec votre plugin html-webpack.

J'avais besoin de mon index.html dans mon fichier index.js, 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, installez et ajoutez le raw-loader avec tous vos autres chargeurs à votre fichier de configuration Webpack. Ainsi:

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

Le chargeur brut convertira à peu près tous les fichiers "requis" en chaîne de texte, puis Webpack le surveillera pour vous et actualisera le serveur de développement à chaque fois que vous apporterez une modification.

Ni Webpack, ni votre programme ne feront quoi que ce soit avec le fichier index.html (ou le modèle) au stade où il est chargé. C'est totalement inutile pour vos environnements de production ou de test, aussi, pour faire 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 fichiers HTML statiques que vous voudriez regarder. ... ou des fichiers texte d'ailleurs. J'utilise le chargeur brut, moi-même, pour les modèles de directive angulaire, mais je n'ai pas besoin de les ajouter au début de mon point d'entrée. Je peux simplement exiger à l'intérieur de la propriété de modèle de directive, 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!'
      }
    }
  })
}
43
Gabriel Kunkel

Ajoutez simplement watchContentBase: true à la configuration de votre devServer. webpack-dev-server surveillera les modifications de tous les fichiers situés dans contentBase dir. Ici, nous regardons tous les fichiers dans ./src

webpack.config.js:

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

}
22
B. Laskowski

Une autre solution consiste à utiliser file-loader pour importer un fichier HTML au niveau du fichier javascript.

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

Cela n’écrit rien sur le disque lorsque webpack-dev-server est en cours d’exécution.

0
ibex