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将监视contentBase目录中所有文件的更改。在这里，我们观看./src

内的所有文件

webpack.config.js：

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

}

Answer 3

如果仅使用npx webpack --watch进行构建，则可以将cache设置为false以便每次生成文件。

new HtmlWebpackPlugin({
  cache: false,
})

阅读此链接以进行进一步的自定义htmlwebpackplugin。

Answer 4

另一个解决方案是使用 file-loader 在条目javascript文件中导入html文件。

import 'file-loader!../templates/index.html';

您可以照常使用 html-webpack-plugin 配置

plugins: [
 new HtmlWebPackPlugin({
  template: path.resolve(__dirname, 'src/templates/index.html'),
  filename: path.resolve(__dirname, 'dist/index.html'),
  files: {
   css: ['style.css'],
   js: ['main.js'],
  }
 })
]

当 webpack-dev-server 正在运行时，这不会向光盘写入任何内容

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

4 个答案: