Webpack开发服务器：监视任意目录文件并重新加载

Question

是否有可能使webpack-dev-server在指定的任意文件集更改时重新加载？

类似以下内容：

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

甚至更加具体地，我可以指定一个正则表达式来监视哪些文件吗？

我正在做这个事情作为一个小技巧，以便在我触发任意文件的特定更改时重新加载(它们可以是.txt、.png或任何其他文件.)

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

- clo_jur

---

contentBase 不工作有点不寻常。观察是否正常工作，例如当您更改入口脚本时？在某些系统中，您可能需要轮询或增加 inotify 观察者的数量。 - Filip Dupanović

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，但我认为这些选项需要更多的努力。

- Filip Dupanović

---

非常感谢您的回复，它在解决类似问题时给了我很大的帮助。您是否有关于如何添加要监视的文件夹的想法？我希望确保在特定文件夹中创建新文件后，它们能够被添加到监视列表中。 - undefined