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

我正在使用webpack-dev-server与html-webpack-plugin进行开发，以生成带修订源的index.html。 事情是每次我改变index.html捆绑系统不会重新重build。 我知道索引是不是在入口，但有没有办法解决这个问题？

Answer 1

问题是index.html没有被Webpack监视。 它只监视那些在你的代码中“需要”或“导入”的文件，并且这些文件正在testing。

该解决scheme有两个部分。

首先需要你的入口点的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与所有其他加载器一起安装并添加到您的Webpackconfiguration文件中。 从而：

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

原始加载器将几乎任何“需要”的文件转换为一个文本string，然后，Webpack将为您观看，并在您每次更改时刷新开发服务器。

Webpack本身和你的程序都不会在加载阶段对index.html文件（或模板）做任何事情。 对于您的生产环境或testing环境来说，这是完全没有必要的，所以如果我正在运行开发服务器，那么只需要添加它即可：

 /* 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文件，你想看看。 …或关于这个问题的文本文件。 对于Angular指令模板，我使用了raw-loader，但是我不必将它们添加到我的入口点的开头。 我只需要在指令模板属性里面，像这样：

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