webpack-dev-server - WLS2与Windows差异导致Nodemon和Webpack-dev-server行为不一致，怎么办？

Question

WLS2环境下, nodemon无法自动重启, 代码更改后webpack-dev-server无法自动打包
wins下可以

node: v16.20.2
webpack-dev-server: 5.1.0
nodemon 3.1.4

Answer 1

WSL2 不支持在宿主机和虚拟机之间的 inotify，因此无法监听文件变化。

https://github.com/remy/nodemon/issues/1913
https://github.com/microsoft/WSL/issues/4169
https://github.com/microsoft/WSL/issues/4739

社区里提供了一种解决思路是开启 nodemon 的 LegacyWatch 模式。但该模式是基于轮询文件实现的，对于大项目来说性能可能会很差。

https://github.com/remy/nodemon?tab=readme-ov-file#application-isnt-restarting

Answer 2

在WSL2（Windows Subsystem for Linux 2）环境中遇到Nodemon和Webpack-dev-server行为不一致的问题，通常与文件系统通知机制有关。WSL2使用虚拟机技术，其文件系统（特别是与Windows文件系统交互时）可能不如原生Linux环境或直接在Windows上运行的应用程序那样高效或实时。以下是一些可能的解决方案：

1. 使用--legacy-watch选项（对于Nodemon）

Nodemon在WSL2上可能无法有效地监视文件更改，因为它依赖于文件系统的事件通知。通过在启动Nodemon时添加--legacy-watch选项，可以强制Nodemon使用轮询机制来检查文件更改，而不是依赖文件系统的事件。这虽然可能增加CPU使用率，但可以解决监视问题：

nodemon --legacy-watch your-script.js

2. 调整Webpack-dev-server的watchOptions

对于Webpack-dev-server，你可以尝试调整其watchOptions配置，特别是poll属性。这将使Webpack使用轮询来检查文件更改，而不是依赖文件系统的通知：

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    // ...
    watchOptions: {
      poll: 1000, // 每1000毫秒检查一次
      ignored: /node_modules/,
    },
  },
  // ...
};

3. 确保WSL2与Windows文件系统同步

WSL2和Windows文件系统之间的交互可能导致延迟或不一致。确保你的WSL2实例是最新的，并且你的Windows系统也是最新的，以便获得最佳的兼容性和性能。

4. 考虑使用WSL的特定设置

在WSL2中，你可以通过/etc/wsl.conf文件调整一些设置，比如禁用自动挂载Windows驱动器，或调整挂载选项来改善性能。但请注意，这些更改可能影响WSL和Windows之间的文件访问和性能。

5. 使用Docker或其他容器技术

如果问题持续存在，并且你正在开发的是可以容器化的应用，考虑使用Docker等容器技术。在Docker容器中运行你的开发环境可以提供一个更加一致和可预测的环境，尤其是在跨平台开发时。

6. 检查权限和所有权问题

确保在WSL2中运行Nodemon和Webpack-dev-server的用户具有适当的文件访问权限。权限问题有时会导致文件监视器无法正确检测到更改。

7. 查阅相关文档和社区

查看Nodemon和Webpack-dev-server的官方文档，看看是否有关于WSL2或类似环境的特定指南或已知问题。此外，社区论坛和Stack Overflow等网站可能也有其他开发者遇到并解决了类似问题的讨论。