Как посмотреть index.html с помощью webpack-dev-server и html-webpack-plugin

Ответ 1

Проблема в том, что index.html не просматривается Webpack. Он отслеживает только те файлы, которые "требуются" или "импортированы" где-то в вашем коде, и загрузчики тестируют.

Решение состоит из двух частей.

Сначала нужно указать файл index.html в вашей точке входа. Технически вы можете потребовать его в любом месте приложения, но это довольно удобно. Я уверен, что вы также можете просто потребовать свой шаблон, если бы вы использовали шаблон с вашим html-webpack-плагином.

Мне нужен мой index.html в моем файле index.js, который является моей точкой входа:

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

Наконец, установите и добавьте raw-loader со всеми вашими другими загрузчиками в ваш конфигурационный файл Webpack. Таким образом:

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

Необработанный загрузчик преобразует практически любой файл, который "требуется" в строку текста, а затем Webpack будет следить за ним и обновлять dev-сервер каждый раз, когда вы вносите изменения.

Ни сам Webpack, ни ваша программа на самом деле ничего не делают с файлом (или шаблоном) index.html на этапе загрузки. Это совершенно не нужно для вашей производственной или тестовой среды, поэтому для хорошей оценки я добавляю ее только в том случае, если я запускаю сервер разработки:

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

В теории вы можете "потребовать" кучу других статических html файлов, которые вы хотите просмотреть.... или текстовые файлы. Я использую raw-loader, сам, для шаблонов директив Angular, но мне не нужно добавлять их в начало моей точки входа. Я могу просто потребовать внутри свойства шаблона директивы, например:

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

Ответ 2

Просто добавьте watchContentBase: true в конфигурацию devServer. webpack-dev-server будет следить за изменениями во всех файлах, находящихся в директории contentBase. Здесь мы просматриваем все файлы внутри. /src

webpack.config.js:

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