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

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

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

webpack dev server: watch arbitrary directory files and reload

webpack

webpack-dev-server

webpack-2