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