page - Cómo ver index.html usando webpack-dev-server y html-webpack-plugin

webpack doc_page src app page body body share_this_document

Question

Estoy usando webpack-dev-server para desarrollo con html-webpack-plugin para generar el index.html con fuentes de revisión. El problema es que cada vez que cambio el index.html, el sistema del paquete no volverá a compilarse. Sé que el índice no está en la entrada, pero ¿hay alguna manera de resolver esto?

Answer 1

El problema es que indexpack no está viendo index.html. Solo mira aquellos archivos que son "requeridos" o "importados" en algún lugar de su código y los cargadores están probando.

La solución tiene dos partes.

Primero, solicite el archivo index.html en su punto de entrada. Técnicamente, puede requerirlo en cualquier lugar de su aplicación, pero esto es muy conveniente. Estoy seguro de que también podría requerir su plantilla si estuviera usando una plantilla con su html-webpack-plugin.

Requirí mi index.html en mi archivo index.js, que es mi punto de entrada:

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

Finalmente , instale y agregue el raw-loader con todos sus otros cargadores, al archivo de configuración de su Webpack. Así:

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

El cargador sin formato convertirá casi cualquier archivo que se "requiera" en una cadena de texto y, a continuación, Webpack lo verá por usted y actualizará el servidor de desarrollo cada vez que realice un cambio.

Ni Webpack ni su programa realmente harán nada con el archivo index.html (o plantilla) en la etapa en que se carga. Es completamente innecesario para su producción o entornos de prueba, así que solo para una buena medida, solo lo agrego si estoy ejecutando el servidor de desarrollo:

/* 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 teoría, puede "requerir" un montón de otros archivos html estáticos que le gustaría ver. ... o archivos de texto para el caso. Yo uso el cargador sin procesar, yo mismo, para las plantillas de directivas angulares, pero no tengo que agregarlas al comienzo de mi punto de entrada. Solo puedo exigir dentro de la propiedad de la plantilla directiva, de esta manera:

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

Otra solución es usar file-loader para importar archivos html en el archivo javascript de entrada.

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

Puede tener su configuración html-webpack-plugin como de costumbre

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

Esto no escribe nada en el disco cuando se está ejecutando webpack-dev-server

Answer 3

Simplemente agregue watchContentBase: true a la devServer su devServer . webpack-dev-server observará los cambios en todos los archivos que se encuentran en el directorio contentBase . Aquí vemos todos los archivos dentro de ./src

webpack.config.js:

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