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

【问题标题】：webpack dev server: watch arbitrary directory files and reloadwebpack 开发服务器：监视任意目录文件并重新加载
【发布时间】：2017-11-28 08:28:57
【问题描述】：

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

类似的东西：

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

更详细地说，我可以指定要查看哪些文件的正则表达式吗？

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

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

【问题讨论】：

contentBase 不起作用有点不寻常。观看是否有效，例如当您更改输入脚本时？在某些系统上，您可能需要轮询或增加inotify 观察者的数量。

标签： webpack webpack-dev-server webpack-2

【解决方案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 的其他模块，但我认为这些选项需要更多的努力。

【讨论】：