webpack - 如何使用 webpack-dev-server 和 html-webpack-plugin 观看 index.html

Question

我正在使用 webpack-dev-server 与 html-webpack-plugin 进行开发，以生成带有修订源的index.html。问题是每次我更改 index.html 时，捆绑系统都不会再次重建。我知道索引不在条目中，但是有办法解决这个问题吗？

Answer 1

问题是 Webpack 没有监视 index.html。它只监视代码中某处“必需”或“导入”的文件以及加载器正在测试的文件。

该解决方案分为两部分。

首先需要入口点中有index.html 文件。从技术上讲，您可以在应用程序的任何地方需要它，但这非常方便。我确信如果您在 html-webpack-plugin 中使用模板，您也可以只需要模板。

我需要在我的index.js 文件中添加index.html，这是我的入口点:

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 会为您监视它并在您每次进行更改时刷新开发服务器。

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 指令模板，但我不必将它们添加到入口点的开头。我可以只在指令模板属性中进行 require，如下所示:

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