如何使用 webpack-dev-server 和 html-webpack-plugin 观看 index.html [英] How to watch index.html using webpack-dev-server and html-webpack-plugin

问题描述

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

I am using webpack-dev-server for development with html-webpack-plugin to generated the index.html with revision sources. The thing is every time I change the index.html the bundle system will not rebuild again. I know the index is not in the entry, but is there a way to solve this?

推荐答案

问题是 webpack 没有监视 index.html.它只监视代码中某处必需"或导入"的文件，并且加载器正在测试这些文件.

The problem is that index.html is not being watched by Webpack. It only watches those files that are "required" or "imported" somewhere in your code and the loaders are testing for.

解决方案分为两部分.

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

First require the index.html file in your entry point. Technically, you can require it anywhere in your application, but this is pretty convenient. I'm sure you could also just require your template if you were using a template with your html-webpack-plugin.

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

I required my index.html in my index.js file, which is my entry point:

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

最后，安装并添加raw-loader与所有其他加载程序，到您的 Webpack 配置文件.因此:

Finally, install and add the raw-loader with all of your other loaders, to your Webpack config file. Thus:

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

原始加载器会将几乎所有需要"的文件转换为文本字符串，然后，Webpack 会为您监视并在您每次进行更改时刷新开发服务器.

The raw loader will convert just about any file that is "required" into a string of text and, then, Webpack will watch it for you and refresh the dev-server every time you make a change.

Webpack 本身和您的程序实际上都不会在 index.html 文件(或模板)加载阶段对其执行任何操作.它对于您的生产或测试环境完全没有必要，所以为了更好的衡量，我只在运行开发服务器时添加它:

Neither Webpack, itself, nor your program will actually do anything with the index.html file (or template) at the stage in which it is loaded. It's completely unnecessary for your production or testing environments, so just for good measure, I only add it if I'm running the development server:

/* 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 指令模板，但我不必将它们添加到我的入口点的开头.我可以只在指令模板属性中要求，就像这样:

In theory you can "require in" a bunch of other static html files you'd like it to watch. ...or text files for that matter. I use the raw-loader, myself, for Angular directive templates, but I don't have to add those to the beginning of my entry point. I can just require inside the directive template property, like this:

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

这篇关于如何使用 webpack-dev-server 和 html-webpack-plugin 观看 index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！