webpack dev服务器：监视任意目录文件并重新加载

Question

当指定的一组任意文件发生变化时，是否可以重新加载webpack-dev-server？

有些事情：

devServer: {
    watchTheseFiles: [ 'path/to/files', 'path/to/more/files' ]
}

更细微的是，我可以指定要观看哪些文件的正则表达式吗？

当我触发任意文件中的某些更改时，我这样做是为了重新加载（它们可能是.txt，.png，无论如何......）

目前，contentBase中指定的路径似乎不会在文件更改时触发重新加载。

Answer 1

我不确定是否有任何比contentBase更好的东西。 webpack，webpack-dev-server和webpack-dev-middleware都公开了invalidate(callback)助手，但这需要您创建自定义脚本来以编程方式管理编译器，服务器或中间件以调用处理程序。

与此类似的事情应该在配置用于监视的所有编译器中起作用，是添加其他文件作为编译依赖项，并让webpack处理无效。您还可以在以编程方式使用webpack时执行此操作，但是编写自己的插件并从配置中执行此操作也非常容易。这是一个示例：

class CustomContextPlugin {
    apply (compiler) {
        compiler.hooks.beforeCompile.tap('CustomContextPlugin', params => {
            params.compilationDependencies.add(
                path.resolve(__dirname, 'public', 'robots.txt')
            )
        })
    }
}

module.exports = {
    plugins: [
        new CustomContextPlugin()
    ]
}

它使用beforeCompile钩子添加robots.txt文件作为编译依赖项。在我们不执行任何缓存的开发中，这会导致开发服务器重新加载页面，因为发出了新的块。

可能还有其他选择。我想到的一件事可能是拥有一个使用require.context的开发条目或其他模块，但是我认为这些选项会涉及更多的工作。