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

Question

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

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指令模板,但我没有必要将它们添加到我的入口点的开头.我可以在指令模板属性中需要,如下所示:

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

只需添加watchContentBase: true到您devServer的配置中即可.webpack-dev-server将监视位于contentBasedir 中的所有文件的更改.在这里,我们观看./src中的所有文件

webpack.config.js:

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

} 

Answer 3

与webpack > 5.0, 使用watchFiles选项

devServer: {
    open: true,
    watchFiles: ['src/**/*'],
},

Answer 4

从webpack > 5.x，没有contentBase和watchContentBase选项
相反，您可以这样做：

devServer: {
   watchFiles:['src/**/*'] // to detect changes on all files inside src directory
}